こんにちは。開発部の濵口です。
もうそろそろ梅雨入りですね。いかがお過ごしでしょうか。
みなさんCSSの擬似クラスはご存知でしょうか？擬似クラスを使いこなすと柔軟にセレクタを指定することができるため、Webページの装飾の幅が広がります。
今回は数ある擬似クラスの中でも似通っていて混乱しがちな、nth-childとnth-of-typeの違いについて解説していきます！
擬似クラスの利用
nth-childもnth-of-typeもn番目の要素を指定することのできる擬似クラスです。
例えば、表の背景色は交互に色分けされていることが多いですよね。そんな時にnth-childやnth-of-typeを利用すると簡単に実現できます。
これら擬似クラスはどちらも同じような用途で使いますが、基本的に別の機能をもった擬似クラスです。理解して使用しないと「思ったものとは違う要素にスタイルが適用されてしまう」ことがありますので、違いを明確にしていきましょう！
nth-childとnth-of-typeの違いを理解する
nth-childとは
nth-childは以下のような形式で記載することで、「指定要素の兄弟要素のうちで、上からn番目の指定要素」に対してスタイルを適用します。
『 要素:nth-child(値){スタイルの内容} 』
以下のHTMLでどの要素がターゲットとなるのかを実際に確認していきましょう。このHTMLにはFruitsという親要素の中に7つの子要素が含まれています。
<div class="Fruits"> <h1>旬の果物</h1> <p>りんご</p> <p>みかん</p> <p>バナナ</p> <p>ブドウ</p> <p>桃</p> <p>レモン</p> </div>
以下のCSSを適用します。
.Fruits p:nth-child(3) {
color: #FF0000;
}
「みかん」にスタイルが適用されて赤文字に変わっていることがわかります。直感的には指定要素がpタグなのでpタグの3番目である「バナナ」にスタイルが適用されそうですが実際は違います。
nth-childでは兄弟要素を上から数える際、指定要素以外の兄弟要素（h1タグ）も対象とするため、単純に上から3番目である「みかん」が選ばれるわけですね。
nth-of-typeとは
nth-of-typeの記載形式もnth-childと変わりませんが、こちらは「指定要素の兄弟要素のうちで、指定要素の順位が上からn番目の要素」に対してスタイルを適用します。
『 要素:nth-of-type(値){スタイルの内容} 』
先ほどのHTMLに以下のCSSを適用します。
.Fruits p:nth-of-type(3) {
color: #FF0000;
}
今度は「バナナ」が赤文字に変わりました。nth-of-typeは指定要素であるpタグの順位を数えるため、pタグのうちで3番目である「バナナ」が選ばれたわけですね。
終わりに
いかがでしたでしょう。nth-childとnth-of-typeの違いがわかりましたでしょうか。
直感的には「nth-childは他の要素が関係するが、nth-of-typeは他の要素が関係しない」と解釈できるかと思います。両者の機能の違いを理解して、使用する擬似クラスを選定するようにしましょう。
またどちらの擬似クラスも(値)部分には数字だけでなく、2n+1のような式や、奇数偶数を表すキーワードのoddやevenが使用できます。例えば、3の倍数の要素を指定したければ3nと指定することで可能です。
サンプルを用意しましたので実際にCSSを変更して表示を確認してみるのも良いでしょう。
参考 Url : http://hamaguchi-test.aispr.jp/web/SampleNth
ぜひ擬似クラスを使いこなしてWebデザインに磨きをかけましょう！
