より便利になったCSS3の追加セレクタ

より便利になったCSS3の追加セレクタ

CSS3の特徴としては、CSS2.1よりも、属性セレクタや擬似クラスなどのセレクタが大幅に拡張されている点が挙げられます。

CSS2.1の属性セレクタでは完全一致による指定しかできませんでしたが、CSS3では、より細かく部分一致で指定できます。次のサンプルは、リンクの種類によってウィンドウアイコンやpdfアイコンを表示するものです。

これまでは、a要素にclass属性を指定して制御するのが一般的でしたが、「a要素のhref属性がhttpで始まる」という指定や「a要素のhref属性がpdfで終わる」という指定を属性セレクタで制御できて便利です。

［リスト01］CSS3の属性セレクタでは部分一致による指定が可能

a[href^=http]{  /* a要素のhref属性がhttpで始まる場合 */
  background:url("window.gif") no-repeat right center;
  padding-right: 30px;
}
a[href$=pdf]{  /* a要素のhref属性がpdfで終わる場合 */
  background:url("pdf.gif") no-repeat right center;
  padding-right: 30px;
}

また擬似クラスセレクタにおいても、HTMLソースをシンプルにできる便利なものが増えています。次のサンプルは、横並びのテキストリンクの間に区切り線を入れたよく使われるナビゲーションです。

これは、li要素をinline表示にして横並びにし、border-rightプロパティで区切り線を表現したものです。末尾に不要な区切り線が表示されないようにするため、CSS2.1では、最後のli要素にclass属性を追記して制御するのが一般的です。CSS3であれば、last-child擬似クラスで、簡単に最後のli要素に対してスタイルを適用することができるので、HTMLにデザインのためのコードを加える必要がありません。

［リスト02］last-child擬似クラスで、末尾の区切り線を表示しない

ul#nav li {
  display: inline; /* インライン表示で横並びに */
  border-right: 1px solid #ccc; /* 右側に区切り線 */
}
ul#nav li:last-child {
  border-right: none; /* 最後のli要素の場合、区切り線を表示しない */
}

次の表2は、CSS3で追加されたセレクタです。

表2：CSS3で追加されたセレクタ一覧

ベンダープレフィックスとは

CSS3の仕様は、まだ策定段階にあるため、将来的には変更される可能性もあります。あくまで先行実装であるということを識別するため、仕様が草案段階にある時に、これら機能を利用する場合は、プロパティや値の先頭にベンダープレフィックス（接頭辞）を付けることが推奨されています。

ベンダープレフィックスは、前後に「-」を付けたベンダー識別子でブラウザの種類を特定するもので、FirefoxのようなMozilla系ブラウザなら「-moz-」、Google ChromeやSafariなどのwebkit系のブラウザなら「-webkit-」となります。

表3：ベンダープレフィックスの種類

ベンダープレフィックスは、草案が勧告候補になった時には、外すよう推奨されています。また、FirefoxやGoogle Chrome、Operaなどのブラウザでは、一部のCSS3の機能が、ベンダープレフィックス無しでも動作するようになっています。したがって現状では、ベンダープレフィックス付きの指定と、将来に備えたベンダープレフィックス無しの指定の両方を併記するのが良いでしょう。

［リスト03］現状では、ベンダープレフィックス無しと有りの記述を併記するのがベター

  -webkit-border-radius: 10px; /* webkit系ブラウザ（Google Chrome、Safari）用 */
  -moz-border-radius: 10px; /* Mozilla系ブラウザ（Firefox）用 */
  border-radius: 10px;  /* 将来の標準のCSS */