疑似要素が効かないときにやりがちなミスと解決方法

悩んでいる人

疑似要素のfirst-childやnth-childが効かないだけど、、

本記事では、このような悩みを解決致します。

僕自身も過去にこれで苦しめられた経験があったので、、、

意味がわかれば

悩んでいる人

そういうことね!

となるので、安心してください。

スポンサーリンク

目次

解説

やりたいこととして、トップの文字だけを赤くしたいとします。

NGコード

See the Pen nth-child_1 by TakahiroOkada (@okalog) on CodePen.

OKコード

See the Pen nth-child_2 by TakahiroOkada (@okalog) on CodePen.

上記NGだと

.item-link::first-child{
  color:red;
}

と指定していているんですが、問題はitem-linkと同じ階層に他のitem-linkがないためfirst-childやnth-childが効かないんですね。

なので

.item:first-child .item-link{
  color:red;
}

上記のように指定することで、itemの一番最初の要素のitem-linkに対して指定をすることができるようになります。

まとめ

結構これでつまづく人が多いイメージだったので参考になれば幸いです。

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる