CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例

:nth-child()の問題を回避する

　こうした:nth-child()の問題を回避するために用意されたのが、:nth-of-type()というセレクタだ。このセレクタを利用して次のように指定すると、見出し部分を偶数と奇数で色分けして表示することができる。

見出しが色分けして表示される

h2:nth-of-type(odd)	{
	background-color: yellow;
	}

h2:nth-of-type(even)	{
	background-color: skyblue;
	}

※ブラウザで表示を確認する

　:nth-of-type()を利用してh2:nth-of-type(odd)やh2:nth-of-type(even)と指定した場合、<div>〜</div>の中に記述した<h2>の数だけをカウントして偶数と奇数を判別するため、<p>の影響を受けずに見出しを色分けできるというわけだ。

　なお、<div>内の<h2>の数を最初からではなく、最後からカウントして処理する場合には、:nth-last-child()の代わりに:nth-last-of-type()を利用することができる。