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

HP制作 WEBサイト

css_ntn

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

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

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

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

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>ココ!</li>
	<li>リスト4</li>
</ul>
li:nth-child(3) {
	color: #ff0000;
	font-weight: bold;
}

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

<ul>
	<li>リスト1</li>
	<li>ココ!</li>
	<li>リスト3</li>
	<li>ココ!</li>
</ul>
li:nth-child(even) {
	color: #ff0000;
	font-weight: bold;
}

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

<ul>
	<li>ココ!</li>
	<li>リスト2</li>
	<li>ココ!</li>
	<li>リスト4</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>リスト1</li>
	<li>ココ!</li>
	<li>リスト3</li>
	<li>リスト4</li>
</ul>
li:nth-of-type(2) {
	color: #ff0000;
	font-weight: bold;
}

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

<ul>
	<h4>他のセレクタ</h4>
	<h4>ココではない</h4>
	<li>リスト1</li>
	<li>ココ!</li>
	<li>リスト3</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>リスト2</li>
	<li>ココ!</li>
	<li>リスト4</li>
</ul>
li:nth-of-type(odd) {
	color: #ff0000;
	font-weight: bold;
}

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

HP制作 WEBサイト

関連記事