CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用

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

指定したナンバーの項目に色をつける

 :nth-child()および:nth-last-child()というセレクタを利用すると、最初と最後の項目だけでなく、指定したナンバーの項目に色をつけることができる。これらは:first-childと:last-childを拡張したセレクタだ。

 たとえば、最初と最後から2つ目の項目に色をつけて表示するには次のように指定する。ここでは、最初から2つ目の項目の背景を黄色で、最後から2つ目の項目の背景を水色で表示するように指定している。

「テキスト02」が黄色で、「テキスト03」が水色で表示される 「テキスト02」が黄色で、「テキスト03」が水色で表示される
li:nth-child(2){
background-color: yellow;
}

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

 :first-childや:last-childと同じように、最初と最後の項目のデザインを指定する場合は、:nth-child(1)および:nth-last-child(1)と指定する。

 なお、:nth-child()と:nth-last-child()はCSS 3のセレクタで、Firefox、Safari、Google Chrome、Operaが対応している。ただし、Firefoxはバージョン3.1(ベータ版)から、Safariもバージョン3.1からの対応となっているので注意したい。また、Internet Explorerはバージョン8(ベータ版)も含めて未対応となっている。

  • コメント(1件)
#1 Cee   2008-12-16 12:05:22
早く全てのブラウザで対応されます様に。。。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]