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

エ・ビスコム・テック・ラボ
2008/12/24 18:18

前回、リストのデザインに適用したCSS 3のセレクタ「:nth-child()」。今回は: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()を利用することができる。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
iPhone 3G セキュリティ Firefox 3 Ajax ブラウザ Windows モバイル Off Topic Windows 7 アプリケーション オープンソース Tips クラウド JavaScript UI マイクロソフト WebKit Windows Vista iPod touch 開発環境 脆弱性 Webデザイン Database Mac OS X プログラミング言語 小技 仮想化 Safari データベース Chrome OS RIA Google Opera Microsoft Webサービス CSS Java Firefox リファレンス Windows XP Internet Explorer Linux Mozilla HTML iPhone インストール Flash ソフトウェア開発 Apple
  • 話題のタグを見る »