【CSS】nth-childとnth-of-typeとfirst-childとfirst-of-typeの違い

css

いや~なまじjqueryをいじりまくっていたんで勘違いしてました。

nth-childとnth-of-typeの違い

例えば上記のようなhtmlがあったとする。
○番目のp要素をだけを赤くしたい場合は下記の用になる。

そうするとbox要素の子要素の2番目のpタグが赤くなるが4番目の場合は、赤くなりません。それはbox要素の子要素の4番目はh3要素だからです。

なので特定のタグで○番目と指定したいときは「nth-of-type」で下記のように指定するといい。

逆に特定のタグではなくてすべての要素の○番目を赤いにしたい!と言った場合には「nth-child」で「*」(アスタリスク)で指定するといい。下記のようにすると上記のhtmlではh3要素が赤くなる。

first-childとfirst-of-typeの違い

基本的にはnth-childとnth-of-typeと原理は同じなので下記に纏めて記載します。

nth-childにせよfirst-childにせよ何番目に要素があるのが分かってたりするんであれば、その順番を指定してしまえばいいんですけどねw 例えばdiv.boxの子要素の6番目はp要素と分かってるんであれば「div.box p:nth-child(6)」としちゃってもいいんですww