12月に入って2日目。

インフルエンザがどんどん流行している中、体調管理はしっかりしてくださいね。

いろんなところにクリスマスシーズン！

今年のクリスマスは賑やかになれることを祈ってます。

さてと、話題を取り戻して…

CSSの疑似クラス「:nth-child(n)」の図説

Webデザインの忘備録として書き込みます。

:nth-childの書き方のパターンの図説と記述方法を説明しますね。

過去のブログを読んだ方にも、「？？？」の人がいたらしく、わかりやすく説明します。

※デザイン、CSSは割愛しておきます。

一番最初だけのデザインを変えたいとき

:first-childまたは、:nth-child(1)

ul li:first-child {
	background: #0071bc;
}

ul li:nth-child(1) {
	background: #0071bc;
}

一番最後だけのデザインを変えたいとき

:last-childまたは、:nth-child(n)

ul li:last-child {
	background: #0071bc;
}

ul li:nth-child(n) {
	background: #0071bc;
}

奇数番だけのデザインを変えたいとき

:nth-child(odd)または、:nth-child(2n+1)

ul li:nth-child(odd) {
	background: #0071bc;
}

ul li:nth-child(2n+1) {
	background: #0071bc;
}

偶数番だけのデザインを変えたいとき

:nth-child(even)または、:nth-child(2n)

ul li:nth-child(even) {
	background: #0071bc;
}

ul li:nth-child(2n) {
	background: #0071bc;
}

それ以外の使い方の要素はMDNサイトに記載しています。

:nth-child()

では、また！