「nth-child」が効かない時の対処法

クラスをいちいちつけなくても要素を指定出来て便利ですよね。

しかし思い通りに効かない（　＾ω＾）・・・

そんなときは「nth-of-type」と使い方を間違っているのかもしれません。

「nth-child」が効かない？「nth-of-type」？？

AAA BB:nth-child(n)

→　AAA要素のなかのｎ番目の要素がBBの場合

例）

テキスト２を指定したい場合は

div p:nth-child(3)

となります。

p要素のみでなく、h1もカウントされることに注意です。

ややこしいので、nth-of-typeを使用したほうがわかりやすいです。

AAA BB:nth-of-type(n)

→　AAA要素のなかのｎ番目のBB

例）

テキスト２を選ぶ場合

div p:nth-of-child(2)

です。

指定した要素のみをカウントするのでわかりやすいですね。

nth-childが効かない場合はほかの要素をカウントしていないかチェックしてみてください。