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

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

 前回の記事「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(ベータ版)での表示 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>
ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ