CSS3 セレクタ「nth-of-type」
今回は、CSS3の「nth-of-type」について書きます。
「nth-of-type」は、ある要素のうち、n番目に来る要素を指定するときに使います。
実際にやったほうがはやいので、さっそくプログラムを書きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div p:nth-of-type(3){ color : 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>）の３番目が赤色に変わっています。
「nth-of-type」によって、ｐ要素（<p>）の中で、３番目にくるものにスタイルをあてることが出来ました。
このような感じで「nth-of-type」を使います。
ここからは、もう少し詳しく「nth-of-type」について書きます。
E:nth-of-type(n) {プロパティ名:値;}nの部分に数値を入れると、親要素内で兄弟関係にあるE要素でn番目のものを指定できます。
上のプログラムの場合ですと、親要素(div)内で兄弟関係にあるE(p)要素でn(3)番目のものとなります。
nの部分ですが、数値以外も入れることができます。
- 倍数
div p:nth-of-type(2n){ color : red; }
「数値n」とすると、倍数になります。このコードですと２の倍数ということになります。
- 奇数・偶数
div p:nth-of-type(odd){ color : red; }
「odd」といれると奇数を指定できます。また、「even」といれると偶数を指定できます。
ここからは、「nth-of-type」と「nth-child」の違いについて書きます。
この２つは、よく似ています。（「nth-child」を知らない方は、コチラを見てください。）
「nth-child」は、親要素のn番目の子要素であるE要素を指定できます。
「nth-of-type」は、親要素内で兄弟関係にあるE要素でn番目のものを指定できます。
両者を実行結果から比べてみます。
「nth-child」
div p:nth-child(3){ color : red; }
「nth-of-type」
div p:nth-of-type(3){ color : red; }
２つとも３番目のｐ要素を赤色にするというものになっていますが、適応されたｐ要素が違います。
「nth-child」は、上から３番目のｐ要素で、「nth-of-type」は、ｐ要素の中の３番目となっています。
これが、違いです。
まとめると・・・
「nth-child」は、親要素のｎ番目にある要素を指定できる。
「nth-of-type」は、親要素内で兄弟関係にある要素のうちのn番目のものを指定できる。
この辺は、実際にやったほうが分かりやすいと思います。
これで、終わります。
