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にログインしてコメントする

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