恋愛・ライフハックからWordPressのカスタマイズメモ

Koeda Blog

WEB・Wordpress

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

投稿日:2017年11月27日 更新日:

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が効かない場合はほかの要素をカウントしていないかチェックしてみてください。

-WEB・Wordpress

Copyright© Koeda Blog , 2018 All Rights Reserved Powered by STINGER.