週末はレストランやコンビニのお菓子のことを書いています。この広告は、90日以上更新していないブログに表示しています。セレクタ「nth-of-type」CSS3今回は、CSS3の「nth-of-type」について書きます。「nth-of-type」は、ある要素のうち、n番目に来る要素を指定するときに使います。実際にやったほうがはやいので、さっそくプログラムを書きます。red;}</style></head><body><div><h1>h1</h1><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><h2>h2</h2><p>p</p><p>p</p><p>p</p></div></body></html>実行結果p要素(<p>)の3番目が赤色に変わっています。「nth-of-type」によって、p要素(<p>)の中で、3番目にくるものにスタイルをあてることが出来ました。このような感じで「nth-of-type」を使います。ここからは、もう少し詳しく「nth-of-type」について書きます。{プロパティ名:値;}nの部分に数値を入れると、親要素内で兄弟関係にあるE要素でn番目のものを指定できます。上のプログラムの場合ですと、親要素(div)内で兄弟関係にあるE(p)要素でn(3)番目のものとなります。nの部分ですが、数値以外も入れることができます。red;}「数値n」とすると、倍数になります。このコードですと2の倍数ということになります。red;}「odd」といれると奇数を指定できます。「even」といれると偶数を指定できます。ここからは、「nth-of-type」と「nth-child」の違いについて書きます。この2つは、よく似ています。(「nth-child」を知らない方は、コチラを見てください。)「nth-child」は、親要素のn番目の子要素であるE要素を指定できます。「nth-of-type」は、親要素内で兄弟関係にあるE要素でn番目のものを指定できます。両者を実行結果から比べてみます。red;}2つとも3番目のp要素を赤色にするというものになっていますが、適応されたp要素が違います。「nth-child」は、上から3番目のp要素で、「nth-of-type」は、p要素の中の3番目となっています。「nth-child」は、親要素のn番目にある要素を指定できる。「nth-of-type」は、親要素内で兄弟関係にある要素のうちのn番目のものを指定できる。この辺は、実際にやったほうが分かりやすいと思います。Linkプロフィールid:gupuruプログラミング関連の事を色々書いています(^^)週末はレストランやコンビニのお菓子のことを書いています。