【HTML/CSS】何番目系が効かない！？

何番目系というと「:nth-child(n)」ですね。それはわかってはいるんだけど何番目の要素にだけ文字に色を付けたいんだけど何故かうまくいかない、CSS指定が効かないなんてことありませんか？それはおそらく使い方を勘違いしているのだと思います。

誰もがわかる例

次の例で見ていきましょう。

「.container ul li:nth-child(3)」として3つ目のli要素の文字を赤にしています。この例は誰がみても想定内の挙動だと思います。

うまくいかない例

続いて次の例です。今度は3番目のp要素の文字の色を赤にしてみましょう。

「.container p:nth-child(3)」として、p要素の3番目を指定しているつもりなのに、実際には2番目の文字が赤くなっています。何故なのでしょうか。

「p:nth-child(3)」このセレクターですが、p要素のある兄弟要素のうち、その兄弟要素の3番目がp要素だったらというように解釈されるんですね。つまりこういう事です。

<div class="container">
  <h2>こんにちは</h2>  <!--1番目の兄弟要素-->
  <p>1つ目のP要素</p>  <!--2番目の兄弟要素-->
  <p>2つ目のP要素</p>  <!--3番目の兄弟要素 ここが赤くなる！-->
  <p>3つ目のP要素</p>  <!--4番目の兄弟要素-->
  <h2>こんばんは</h2>  <!--5番目の兄弟要素-->
  <p>4つ目のP要素</p>  <!--6番目の兄弟要素-->
  <p>5つ目のP要素</p>  <!--7番目の兄弟要素-->
</div>

それでは正解例です

3番目のp要素の文字の色を赤にしてみましょう。

狙い通りCSSが効いてくれました。

別の例(2番目のh2を…)

では今度は2番目のh2要素の文字の色を赤にしてみましょう。もうおわかりですよね。

はい、うまく出来ました。2番目のh2要素は兄弟要素の5番目なので、(5)を指定すればよいのです。

さらに別の例(2番目のh2を…その2)

違うセレクターの書き方も例に挙げます。

これでも出来ますね。セレクターからh2を取ってしまうのです。これが見た目的にも一番スマートかもしれませんね。