WWW WATCH

CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。

CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。

ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。

今回の解説のベースにしているのは W3C CSS3 Selectors (Working Draft) になります。数が多いので、何回かに分けていきます。

ユニバーサルセレクタ （Universal selector）

*

ユニバーサルセレクタは、すべての要素を対象にするセレクタです。CSS2 で定義されました。

単独で使用してブラウザのデフォルトスタイルのクリアに用いたり、

* {
     margin:0;
     padding:0;
     }

他のセレクタと組み合わせることで、例えば、

ul#foo * li {
     margin:0;
     padding:0;
     }

foo という id 属性の付いた ul 要素の直接の子要素は除外した上で、孫要素以下の li 要素にスタイルを適用するなどといったことができます。

タイプセレクタ （Type selector）

E

タイプセレクタは最も単純なセレクタです。要素名を指定することで、その要素に対してスタイルを適用します。

p {
     margin:0;
     padding:0;
     }

属性セレクタ （Attribute selectors）

E[foo]

ある要素の中で、指定した属性をもつ要素に対してスタイルを定義します。CSS2 で定義されました。

p[class] {
     margin:0;
     padding:0;
     }

例えば上記のように、class 属性を持った p 要素にスタイルを定義します。

E[foo="bar"]

同じく属性セレクタですが、こちらは属性名だけでなく、その値も含めて指定します。CSS2 で定義されました。

a[rel="external"] {
     padding-right:15px;
     background:(image/external-icon.png) no-repeat right center;
     }

例えば上記のように、外部リンクの a 要素にのみ rel 属性として external を指定しておき、外部リンクにはアイコンを付加するなどといった使い方も可能です。

E[foo~="bar"]

ある要素の中で、指定した属性名、及び属性値を持つ要素にスタイルを指定しますが、「~」 を使用することで、複数の属性値が指定されている場合は指定の属性値を含んでいれば適用されます。CSS2 で定義されました。

p[class~="foo"] {
     margin:0;
     padding:0;
     }

class 属性を持つ p 要素の中で、foo という属性値が含まれているものにスタイルを指定します。

E[foo^="bar"]

ある要素の中で、指定した属性名、及び属性値を持つ要素にスタイルを指定しますが、「^」 を使用することで、指定の文字で始まる属性値に対してスタイルを適用します。CSS3 で定義されました。

p[class^="ex"] {
     margin:0;
     padding:0;
     }

class 属性を持つ p 要素の中で、ex から始まる属性値を持つものにスタイルを指定します。これを利用して外部リンクにのみ自動的に外部リンクを示すアイコンを付ける方法を以前に紹介しました。（参考エントリー）

E[foo$="bar"]

ある要素の中で、指定した属性名、及び属性値を持つ要素にスタイルを指定しますが、「$」 を使用することで、指定の文字で終わる属性値に対してスタイルを適用します。CSS3 で定義されました。

a[href$=".pdf"] {
     padding-right:15px;
     background:(image/pdf-icon.png) no-repeat right center;
     }

例えば上記のようにファイルの拡張子を指定して、PDF ファイルに対するリンクには PDF を示すアイコンを付加するなどといった使い方も可能です。

E[foo*="bar"]

ある要素の中で、指定した属性名、及び属性値を持つ要素にスタイルを指定しますが、「*」 を使用することで、指定の文字列を含む属性値に対してスタイルを適用します。CSS3 で定義されました。

p[class*="ex"] {
     margin:0;
     padding:0;
     }

class 属性を持つ p 要素の中で、ex を含む属性値を持つものにスタイルを指定します。

E[hreflang|="en"]

E[lang|="en"] もこれと同様ですが、(href)lang 属性を持った要素に対して使用されるセレクタです。(href)lang 属性の値に対して、前方一致で該当するものを指定します。

a[hreflang|="en"] {
     padding-right:15px;
     background:(image/en-icon.png) no-repeat right center;
     }

のようにすると、hreflang 要素を持つ a 要素の中で、属性値に en-US など、en を前方一致で含む値を持った要素にスタイルが指定されます。上の例のように、リンク先が英語の場合は、英語サイトを示すアイコンを表示するなどの用途で使用できます。CSS2 で定義されました。

さて、今回はここまで。続きは次回で。

関連エントリー
CSS セレクタに関するおさらい 2
CSS セレクタに関するおさらい 3

関連リンク
CSS3 Selectors