nth-childの罠

Author:
css

cssでよく使われるnth-childというものがあります。
要素の何番目かを表す値で、2番目の色はこれ、3番目の色はこれと指定できます。
が、これ罠があって。
別のタグでもカウントされてしまうのですよ。

例えばこんなタグがあります。
<div>
<p>
<a href=”1.html”>
<a href=”2.html”>
<a href=”3.html”>
</div>

これにこんなスタイルをあてます。
a:nth-child(1) {
color: red;
}
a:nth-child(2) {
color: orange;
}
a:nth-child(3) {
color: yellow;
}

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

嫌らしいけどedgeでもchromeでもfirefoxでもこうやってレンダリングされるので仕様なのでしょうね。

そういうわけでnth-childを使う場合はul/liやtr/tdなど子供が決まっているものにしましょうね。
じゃないと予期せぬバグを生みますので。

しっかしcssというものは色々分かりづらい仕様ですよね。
どうにかならんものか。

Share on Facebook
Pocket