見出し画像

コーディング実践②「擬似クラス」

こんにちは。最近の学習はCF課題のデザインカンプをみてコーディングをするコーディング実践を行っていました。すごく楽しいですが、難しいところも出てきて詰まることもしばしばです。
今回は、苦戦した擬似クラス「first-child」「last-child」について書き留めておこうと思います。

TOPページ_02

最初にこのナビゲーションメニューを見た時に、
「最後のliのgackgroundとcolorを変えればいいんだ」と思い、

スクリーンショット 2020-11-08 19.23.58

こう書いたところ、

スクリーンショット 2020-11-08 19.20.40

colorだけ効いてない。。。となり、考えた結果
aタグにかけないといけないと気がついて

スクリーンショット 2020-11-08 19.42.47

こうなりましたが

TOPページ

全部のaタグにかかってしまってる。。。なぜ!!笑
コチラは結構苦戦して last-of-type を使ってみたりしましたが、結果は変わらず。色々調べてコチラの記事を発見!

コチラを参考に書いてみたところ

スクリーンショット 2020-11-08 19.50.33

こうなって

TOPページ_02

出来た!!笑
最後の子要素のliの中のaタグにかけることによって完成しました。
こういう last-child のかけ方はまだしたことがなかったのでとてもいいお勉強になりました。

この記事が気に入ったらサポートをしてみませんか?