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

Author:

cssでよく使われるnth-childというセレクタがあります。
要素の何番目かを表す値で、2番目の色はこれ、3番目の色はこれと指定できます。
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というものは色々分かりづらい仕様ですよね。
どうにかならんものか。

Facebook にシェア
Pocket