「nth-child」が効かない時の対処法
2019.09.19
cssセレクタ「nth-child」
クラスをいちいちつけなくても要素を指定出来て便利ですよね。
しかし思い通りに効かない( ^ω^)・・・
そんなときは「nth-of-type」と使い方を間違っているのかもしれません。
「nth-child」が効かない?「nth-of-type」??
AAA BB:nth-child(n)
→ AAA要素のなかのn番目の要素がBBの場合
例)
<div>
<h1>タイトル</h1>
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>
テキスト2を指定したい場合は
div p:nth-child(3)
となります。
p要素のみでなく、h1もカウントされることに注意です。
ややこしいので、nth-of-typeを使用したほうがわかりやすいです。
AAA BB:nth-of-type(n)
→ AAA要素のなかのn番目のBB
例)
<div>
<h1>タイトル</h1>
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
</div>
テキスト2を選ぶ場合
div p:nth-of-child(2)
です。
指定した要素のみをカウントするのでわかりやすいですね。
nth-childが効かない場合はほかの要素をカウントしていないかチェックしてみてください。
関連記事
コメントを残す