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

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　前回の記事「CSS 3のセレクタ：最初と最後、偶数と奇数の要素にスタイルシートを適用」では、:nth-child()などのセレクタを利用してリストのデザインをカスタマイズした。今回は、これらのセレクタを利用したときに発生する問題点を見ていきたい。

　なお、ブラウザはFirefox 3.1（ベータ版）、Safari 3.1、Google Chrome、Operaが対応している。Internet Explorerはバージョン8（ベータ版）でも対応していない。

:nth-child()の問題

　前回は、<li>でマークアップしたリストの項目を奇数と偶数で色分けして表示するため、li:nth-child(odd)とli:nth-child(even)で次のようにスタイルシートを指定した。

　ここでは、奇数番目の項目の背景を黄色で、偶数番目の項目の背景を水色で表示するように指定している。ブラウザの表示を確認しても、リストの項目は指定した色で交互に表示され、特に問題は発生していないことがわかる。

Firefox 3.1（ベータ版）での表示

li:nth-child(odd){
background-color: yellow;
}

li:nth-child(even){
background-color: skyblue;
}

<h2>リストA</h2>

<ul>
<li>テキスト01</li>
<li>テキスト02</li>
<li>テキスト03</li>
<li>テキスト04</li>
<li>テキスト05</li>
</ul>

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

　それでは、このスタイルシートの設定をリスト以外のコンテンツに適用してみよう。ここでは、次のように見出しと文章を記述したコンテンツを用意した。見出しは<h2>で、文章は<p>でマークアップし、全体を<div>で囲んで記述してある。

見出しと文章を記述したもの

<div>

<h2>見出しA</h2>

<p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p>

<h2>見出しB</h2>

<p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p>

<h2>見出しC</h2>

<p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p>

<h2>見出しD</h2>

<p>テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。</p>

</div>

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