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

css

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

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



ここはh3要素


ここはp要素


ここはp要素


ここはh3要素


ここはp要素


ここはp要素

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

/* 2番目のp要素  */
div.box p:nth-child(2){
    color:red;
}

/* 4番目のp要素 */
div.box p:nth-child(4){
    color:red;
}

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

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

div.box p:nth-of-type(4){
    color:red;
}

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

/* boxの子要素の4番目を赤にする */
div.box *:nth-child(4){
color:red;
}

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

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


/* p要素の中で最初のp要素を赤くしたい場合 */
div.box p:first-of-type{
color:red;
}

/* div.box内のすべての子要素で最初の要素を赤くしたい場合 （上記のhtmlではh3が赤くなる）*/
div.box *:first-child{
color:red;
}

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