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

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

 コンテンツの見出し部分を奇数と偶数で交互に色分けして表示するため、h2:nth-child(odd)とh2:nth-child(even)で、次のようにスタイルシートを指定した。ここでは、奇数番目の見出しの背景を黄色で、偶数番目の見出しの背景を緑色で表示するように指定している。しかし、見出し部分は色分けされず、すべて黄色で表示されてしまう。

すべての見出しが黄色で表示される すべての見出しが黄色で表示される
h2:nth-child(odd){
background-color: yellow;
}

h2:nth-child(even){
background-color: skyblue;
}
ブラウザで表示を確認する

 この問題は、:nth-child()が適用先の<h2>の数ではなく、親要素の<div>〜</div>の中に記述したすべての要素をカウントして偶数と奇数を判別するために発生する。

 たとえば、h2:nth-child(odd)と記述した場合、「奇数番目の<h2>に適用する」と指定したのではなく、「奇数番目の要素が<h2>だった場合に適用する」と指定したことになる。

 上のサンプルでは<h2>と<p>を交互に記述しているので、奇数番目の要素はすべて<h2>となり、h2:nth-child(odd)の設定が適用される。また、偶数番目の要素はすべて<p>となるので、h2:nth-child(even)の設定は適用されず、背景色は変わらない。

 リストの場合、親要素となる<ul>〜</ul>の中には<li>だけしか記述しないので問題が発生することはなかったが、<h2>と<p>のようなケースでは:nth-child()で思い通りのデザインを設定するのは難しい。

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