nth-of-typeが効かない？！ときに確認するべきこと
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
様々な条件で要素を指定できる疑似クラス。便利です。
大体が感覚的に使えてわかりやすいんですが、一部気を付けるべきものもあります。
何となくどういう挙動をするかはわかっていても、実際使ってみると？？？となることもしばしば。
というわけで今日はnth-of-type疑似クラスのちょっとした注意点です。
nth-of-type指定が意図する挙動と違う！その仕様とは
考え方・前提として、名前の通りこの疑似クラスは指定した要素のタイプに深く関係します。
んで、これがわかっていないと下記のような使い方をした場合に混乱してしまいます。
See the Pen nth-of-typeがうまく効かない？？ by mycreatesite (@mycreatesite) on CodePen.
上記ではtargetという名前を付けたクラス名に対してnth-of-typeを指定した場合のサンプルです。
↑をみて？？？となってる方も少なからずいるかもしれません。
クラス名に対してnth-of-typeを使う場合は混乱を招きやすい
ｐタグが5個、そのうち②番目と③番目のｐタグにtargetというクラス名が付いています。
そしてCSSで次のような指定をしてみます。
.target:nth-of-type(2) {
color: red;
}
直感的には２個目のtargetクラスが付いたｐタグ（③番目のｐタグ）の文字が赤くなりそうですよね。
でも実際は違います。
正解はサンプル通り、1個目のtargetクラスが付いたｐタグ（②番目のｐタグ）です。
nth-of-type(2)の2はクラス名ではなく、あくまでクラスが付いた要素名（ｐ要素）にかかっている、ということ
２個目のtargetという意味ではなく、２個目のｐ要素を指定するということです。
その上でtargetというクラス名が付いていればスタイルを適用します。
冒頭の通り、nth-of-typeは指定した要素のタイプに深く関係します。
上記サンプルで言えば、.target:nth-of-type(2) という指定は、実際のところ p.target:nth-of-type(2) なわけです。
結論
- クラス名を基準に考えてnth-of-type(n)を使うと意図する挙動にならない場合がある。
- クラス名に対してnth-of-type(n)を指定する場合は、クラス名が付けられた要素名もしっかり把握する。
