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

エ・ビスコム・テック・ラボ
2008-12-24 18:18:00
  • このエントリーをはてなブックマークに追加

: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()を利用することができる。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]