:nth-childが効かない…
2022年11月19日
もう11月半ばになりましたね。
COVID-19はなかなか終わりの見込みがないみたいですね。
そろそろインフルエンザも流行の季節になってきてるので、気を付けてください。
これからどんどん寒い季節になりますが、風邪をひかずに体調に気を付けてくださいね！
いつになったらマスク生活から脱却できるんやろ？
マスクを購入する費用が本当に年間に1万円以上かかってんやから、政府の補助金でもせめて出してくれ！
「政府がマスク着用をってお願いしてるんやったら一人に1万円ぐらいは補助金を出してくれよー！」って言いたいぐらいです。（笑）
さてと本題に入りましょう。
:nth-childが効かない…
Webデザインをコーディングするとき、ついにはまったことがありました！
:nth-childが効かないときの対処方法をご紹介します。
:nth-childが使えるのは親要素があって子要素のみしか適用されません。
使い方を説明しよう！
<ul class="list">
<li>1番目（最初）</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目（最後）</li>
</ul>
.list{margin:0 auto 30px;padding:0;}
.list li{list-sytle-type:disc;margin:0 0 10px 20px;padding:0;}
.list li:last-child{margin:0 0 0 20px;}このような:nth-childは適用されます。
しかし、
<div class="text_area">
<p>ここにテキストが入ります。</p>
<p>ここにテキストが入ります。</p>
<p>ここにテキストが入ります。</p>
<p>ここにテキストが入ります。</p>
</div>.text_area{margin:0 auto 30px;padding:0;}
.text_area p{margin:0 0 10px;padding:0;}
.text_area p:last-child{color:#ff0000;font-weight:700;margin:0 0 10px;}表示結果はもちろん不可能！
:first-childもしてみたが不可能！
:nth-child(xx)もしても不可能！
いろいろ試行錯誤してみたが…
脳裏の中から妙な英語が浮かび上がり…
何とかの「～of～」を使ったような気がしたなーと思い出しながら…
結局は思い浮かべず…
お助けのネットで調べました…
プロとしては恥ずかしいんです…
ネットで調べたら:nth-of-typeでした。
.text_area{margin:0 auto 30px;padding:0;}
.text_area p{margin:0 0 10px;padding:0;}
.text_area p:nth-of-type{color:#ff0000;font-weight:700;margin:0 0 10px;}これですっきり…
と思ったら、:nth-childの使い方のバリエーションがあったの気づきませんでした！
.text_area{margin:0 auto 30px;padding:0;}
.text_area p{margin:0 0 10px;padding:0;}
.text_area p :nth-child(3){color:#ff0000;font-weight:700;margin:0 0 10px;}半角スペースを空けるんですね！
こういう手もあったんか…！
これからどんどん磨きかけなくては！
ではまた！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日