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

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

 今回から、CSS 3の草案「Selectors」で新しく追加されたセレクタについて紹介していきたい。これまでCSS 3のセレクタに十分に対応しているのはOperaだけだったが、FirefoxがFirefox 3.1(ベータ版)で、SafariもSafari 3.1で対応を進めたことにより、Internet Explorerを除く主要なブラウザで利用できるようになった。

 今回は、「:first-child」と「:last-child」、「:nth-child()」と「:nth-last-child()」を紹介する。これらのセレクタを利用すると、最初と最後の要素や、指定したナンバーの要素、さらには奇数と偶数の要素に対してスタイルシートを適用することができる。そのため、これまでのように余計な

やクラス名を追加することなく、さまざまなデザインを設定できるようになる。

 たとえば、こうしたセレクタを利用して、

  • でマークアップしたリストのデザインをカスタマイズしてみよう。

    最初と最後の項目に色をつける

     リストの最初と最後の項目に色をつけようとした場合、従来であれば最初と最後の項目にクラス名を指定して、クラス名に対してスタイルシートを適用する必要があった。しかし、次のように:first-childと:last-childというセレクタを利用すれば、クラス名を指定しなくても色をつけることが可能だ。

     ここでは、最初の項目の背景を黄色で、最後の項目の背景を水色で表示するように指定している。

    Firefox 3.1(ベータ版)での表示 Firefox 3.1(ベータ版)での表示
    li:first-child{
    background-color: yellow;
    }
    
    li:last-child{
    background-color: skyblue;
    }
    

    リストA

    • テキスト01
    • テキスト02
    • テキスト03
    • テキスト04
    • テキスト05
    ブラウザで表示を確認する

     また、複数のリストがある場合、それぞれのリストの最初と最後の項目に色がつくことがわかる。

    複数のリストを表示したもの 複数のリストを表示したもの

    リストA

    • テキスト01
    • テキスト02
    • テキスト03
    • テキスト04
    • テキスト05

    リストB

    • テキスト01
    • テキスト02
    • テキスト03
    • テキスト04
    • テキスト05
    ブラウザで表示を確認する

     なお、:first-child はCSS 2で定義されたセレクタで、Firefox、Safari、Google Chrome、Operaが対応しており、Internet ExplorerもIE 7から対応している。

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

  • コメント(1件)
#1 Cee   2008-12-16 12:05:22
早く全てのブラウザで対応されます様に。。。
  • 新着記事
  • 特集
  • ブログ