nth-child() 疑似クラス

nth-child() 疑似クラスを使うと、特定の順番の要素だけを指定できます。

例えば、li:nth-child(even) と記述すると偶数番目、li:nth-child(odd) と記述すると奇数番目のアイテムに対して CSS を適用できます。

また、n を整数の数列として特定の要素をしていすることもできます。li:nth-child(3n) と記述すると3の倍数番目のアイテムになります。

例

• Google Chrome
• FireFox
• Safari
• Opera

HTML

<ul class="Test">
	<li>Google Chrome</li>
	<li>FireFox</li>
	<li>Safari</li>
	<li>Opera</li>
</ul>

CSS

ul.Test li:nth-child(even) {
	color: #0000FF;
}