CSSは奥が深いです。今更シリーズの一つですが、nth-child()とnth-type-of()の違いが今ひとつ理解できてませんでした。何でもnth-childを使ってました。
nth-child
● nth-child は、指定された親要素内のすべての子要素の中から、指定した数値の位置にマッ チする要素を選択します。
●要素のタイプに関係なく、単純に指定された位置を持つ要素を選択します。
nth-of-type
●nth-of-type は、指定された親要素内の特定のタイプの要素の中から、指定した数値の位置にマッチする要素を選択します。
●要素のタイプが特定されており、そのタイプの要素のみがカウントされます。
例えば、下記のようなコードがあった場合
<div class=”example-class”>
<div class=”item”>1番目の子要素</div>
<div class=”item”>2番目の子要素（ここにスタイルを適用したい）</div>
<div class=”item”>3番目の子要素</div>
</div>
下記のCSSはうまくいきません。
.item:nth-child(2) {
color: blue;
}
おそらく、親要素を基準にしての２番目の子要素はどの親の要素から数えて、2番目かがわからないからだと思います。(本人はわかっていますが。。。)
nth-childを使いたい場合、下記のように記述します。
.example-class > .item:nth-child(2) {
color: blue;
}
対して、nth-type-ofは特定の要素に対して、何番目かなので下記のように書くことができます。
.item:nth-of-type(2) {
color: blue;
}
今まであまり理解していなく、classを無理やりつけて調整していました。WordPress化を見据えた場合、むやみにクラスをつけない方がいいとわかりましたので、今一度、ちゃんと理解する必要がありました。
今更ですが、スッキリしました。