【CSS注意点】別タグでもカウントされるnth-childの罠

cssでよく使われるnth-childというセレクタがあります。 要素の何番目かを表す値で、２番目の色はこれ、３番目の色はこれと指定できます。 2n+1とか数学みたいな式を書くことで一つ飛びとかも実現できます。 が、これ罠があって。 別のタグでもカウントされてしまうのですよ。 例えばこんなタグがあります。

<div>
<span>0<span>
<a href="1.html">1</a>
<a href="2.html">2</a>
<a href="3.html">3</a>
</div>

これにこんなスタイルをあてます。

div a:nth-child(1) {
color: red;
}
div a:nth-child(2) {
color: orange;
}
div a:nth-child(3) {
color: green;
}

結果

すると結果は、aに対するnth-childを指定しているのにもかかわらず1.htmlのaタグがオレンジに、2.htmlのaタグが緑色に、3.htmlのaタグはスタイルが反映されないという結果になります。 spanタグが邪魔しているのです。

See the Pen dqYRQb by yuji ogata (@ogaty) on CodePen.

つまり、 aタグで絞り込んだ2番目の色じゃなくて、 2番目のタグがaだったら色をつける、という動作なのですね。 nth-child(2)→aという判定っぽい。

そういう仕様なのだから仕方ない

嫌らしいけどedgeでもchromeでもfirefoxでもこうやってレンダリングされるので仕様なのでしょうね。 ただこれ、div-p-a-/p-/divという感じで囲むと問題なし。子タグがカウントされるのですね。 そういうわけでnth-childを使う場合はul/liやtr/tdなど子供が決まっているものにしましょうね。 じゃないと予期せぬバグを生みますので。 しっかしcssというものは色々分かりづらい仕様ですよね。 どうにかならんものか。