:nth-childが効かない…

もう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;}

半角スペースを空けるんですね！

こういう手もあったんか…！

これからどんどん磨きかけなくては！

ではまた！