前回の記事「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)で次のようにスタイルシートを指定した。 ここでは、奇数番目の項目の背景を黄色で、偶数番目の項目の背景を水色で表示するように指定している。ブラウザの表示を確
![CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例 - builder by ZDNet Japan](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ea1196150830b2d8b8c56d9102cd0686debb1da/height=288;version=1;width=512/https%3A%2F%2Fbuilder.japan.zdnet.com%2Fstorage%2F2011%2F01%2F24%2Ffb992119278d5efc61135647065ca56d%2Fstory_media%2F20363152%2F071212css-firefox-safari_184x138.jpg)