【CSS】特定セレクタの偶数、奇数、n番目の要素にだけスタイルを適用したい！

前回「最初の要素、最後の要素だけにスタイルを適用したい！」でご紹介した擬似クラスには
特定セレクタのn番目や、偶数番目、奇数番目を指定するようなものもあります。

:nth-child(引数)　n番目の要素が指定セレクタならスタイルを適用する

:nth-of-type() とは違い、指定セレクタがある場合はセレクタに関係なくn番目の要素を判別し、
その要素が指定セレクタであればスタイルを適用させます。

:nth-child(n) n番目の要素

<ul>
	<li>リスト１</li>
	<li>リスト２</li>
	<li>ココ！</li>
	<li>リスト４</li>
</ul>

li:nth-child(3) {
	color: #ff0000;
	font-weight: bold;
}

:nth-child(even) 偶数番目の要素

<ul>
	<li>リスト１</li>
	<li>ココ！</li>
	<li>リスト３</li>
	<li>ココ！</li>
</ul>

li:nth-child(even) {
	color: #ff0000;
	font-weight: bold;
}

:nth-child(odd) 奇数番目の要素

<ul>
	<li>ココ！</li>
	<li>リスト２</li>
	<li>ココ！</li>
	<li>リスト４</li>
</ul>

li:nth-child(odd) {
	color: #ff0000;
	font-weight: bold;
}

:nth-of-type(引数)　指定セレクタのn番目の要素にスタイルを適用する

:nth-child() とは違い、指定セレクタがある場合、そのセレクタのn番目の要素に
スタイルを適用させます。

:nth-of-type(n) n番目の要素

<ul>
	<h4>他のセレクタ</h4>
	<h4>ココではない</h4>
	<li>リスト１</li>
	<li>ココ！</li>
	<li>リスト３</li>
	<li>リスト４</li>
</ul>

li:nth-of-type(2) {
	color: #ff0000;
	font-weight: bold;
}

:nth-of-type(even) 偶数番目の要素

<ul>
	<h4>他のセレクタ</h4>
	<h4>ココではない</h4>
	<li>リスト１</li>
	<li>ココ！</li>
	<li>リスト３</li>
	<li>ココ！</li>
</ul>

li:nth-of-type(even) {
	color: #ff0000;
	font-weight: bold;
}

:nth-of-type(odd) 奇数番目の要素

<ul>
	<h4>ココではない</h4>
	<h4>他のセレクタ</h4>
	<li>ココ！</li>
	<li>リスト２</li>
	<li>ココ！</li>
	<li>リスト４</li>
</ul>

li:nth-of-type(odd) {
	color: #ff0000;
	font-weight: bold;
}

偶数、奇数はfloatを使う２列メニューなどで役に立ちますね。