css3で追加されたnth-childとnth-of-typeの違いについてまとめてみた #css #css3

css3で追加されたnth-childとnth-of-typeの違いについてまとめてみた #css #css3

最近は、nth-of-typeのほうが使い勝手がよくて、nth-childをあまり使わなくなった感のある旦人です。この2つの擬似要素が似ているようで、全然違う働きをするからというのが主な理由です。

ということで、今一度、あえてnth-childとnth-of-typeの違いについてまとめてみました。

擬似要素 :○○-child シリーズについて

○○-childシリーズは、:first-child、:last-child、:nth-child(an+b)の3通りが存在しますが、どれも後ろに-childというのがついていることからわかるとおり、子要素について効果を発揮するのがポイントです。

以前にテーブルの偶数行・奇数行に色をつけるところでも書いたように、テーブルのような表でこそ、その真価を発揮するといっても過言ではないでしょう。

以前のサンプルコードから見ていくと

というHTMLに対して

というスタイルを与えると、奇数行の色が変化しました。つまりHTMLでは上記のコードにおいて、下記のハイライトさせた部分にだけスタイルが適用されたということになりました。

<tr>の奇数行に対する子要素全体にスタイルを適用するわけです。だから、テーブルの偶数行や奇数行といった部分の色分けにはちょうどいいのです。

first-childは最初の行に対する子要素、last-childは最後の行に対する子要素と考えれば大丈夫でしょう。

擬似要素:○○-of-type シリーズについて

○○-childシリーズが子要素に適用する擬似要素であるなら、○○-of-typeシリーズは兄弟関係に使える擬似要素です。同じブロック内の兄弟関係に使えるのです。:first-of-type、:nth-of-type(an+b)、:last-of-typeの3通りが存在します。どれもこれも同じブロック内の兄弟関係のときに使えます。

ここが○○-childととの大きな違いになるわけです。

○○-childと同じHTMLに対して

というスタイルを与えてみると適用されるのは、

というように、子要素ではなくて、兄弟関係にあるものに対応します。こう見ると、この2つの違いがよくわかりますね。

nth-childとnth-of-typeの違いについてまとめ

○○-childは子要素に対して適用させた場合に使い、○○-of-typeは兄弟関係にあるものに対して適用させたい場合に使うものです。どちらがいいかは、その時のHTMLの構造次第だったり、適用させたいスタイルの内容だったりしますが、必要に応じて適宜使い分けられるといいなと思いました。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top