nth-of-typeの罠

web言語ロゴ

本日はnth-of-typeの罠に関して記載して行きたいと思います。
nth-of-typeが「効かない」「ズレる」「上手く指定出来ない」と言う方に役立つかもしれません。

まずはちょっとしたおさらい的な話から進めさせていただきます。

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

まず、nth-of-typeとはCSSのセレクタであり、セレクタとは適用対象を指定するモノになります。

h1 ← セレクタ {
    font-size: 16px;
}

似たようなセレクタにnth-childと言うモノがありますが、個人的にはnth-of-typeの方が使い勝手がよいのでnth-childを使うコトはほとんどありません。

その理由を、違いというテーマの中で話して行きたいと思います。

nth-childの例

上記のCSSセレクタはdiv p:nth-child(2)に指定してあるので感覚的には2番目のPタグが赤くなりそうな気がしますが、実際には1番目のPタグと言う部分が赤くなっています。

nth-childと言う指定は、上記の場合で言うとdiv要素の中にある2番目の要素がp要素だった場合にその要素を赤くすると言う命令になっており、div要素にとって中に入っている1番目の要素とはh1要素になるので、このような挙動になる訳です。

つまり直接:nth-childを付けたp要素を中心にではなく、親要素を中心に考える指定の仕方になります。

nth-of-typeの例

変わって上記はnth-of-typeを使用した例であり、div p:nth-of-type(2)と指定し、2番目のPタグが赤くなっています。

これが私がnth-childより、nth-of-typeを多用する理由であり、nth-childの例の冒頭で触れましたが、感覚通りの挙動をするのです。
つまり直接:nth-of-typeを付けた要素を中心に動いてくれるのであります。

しかし、このように便利なnth-of-typeにも落とし穴があります。

2.nth-of-typeの罠

上記のセレクタの指定はdiv .ex:nth-of-type(2)としてあります。

nth-of-typeの感覚通り指定した要素に直接働いてくれる機能を考えると、class=”ex”の2番目、「3番目のPタグ∧2番目のex」の部分が赤くなりそうな気がしますが、実際に赤くなるのは「2番目のPタグ∧1番目のex」になります。

これはバグなどではなく、正しい挙動です。

上記の指定はdiv .ex:nth-of-type(2)となっていますが、別の書き方に直すと「div p.ex:nth-of-type(2)」と同じです。

そして、:nth-of-typeは属性(class=”ex”)に直接かかって居るのではなく、属性元の要素(p)に対してまず作用し、対象の順番にある要素を選び、その要素に属性(class=”ex”)が指定されているかどうかを調べ、存在した場合に命令を実行する流れになります。

つまり、「div要素の中にあるp要素の2番目にexと言うクラス名が付いていた場合はその要素を赤くする」と言う指定になっている訳なのです。

この部分を理解していないと、id名やclass名で指定する時に悩んでしまいますので、罠にハマらないようにご注意くださいませ。

関連:【使い方】CSS nth-of-type DEMO

Categories: CSS