CSS 3 の属性セレクタの分かりやすい説明

CSS 3 attribute selectors - Opera Developer Community

CSS 3の属性セレクタを簡潔に説明している。

まず、擬似セレクタの、:before と :after これは前後のスタイルを指定するものだ。この擬似セレクタを、generated content と共に使えば、前後に画像を挿入できたりする。

さて、アンカー要素の href 属性に、ある特定の拡張子があったときのみ、特定のスタイルを提供したいという場合、どうすればいいだろう。例えば、画像の拡張子は、bmpやjpgやpngであるし、動画は、aviやmp4やmkvだ。たしかに、URLが拡張子にならない場合もあるが、class 属性を糞真面目につけておくのも面倒である。ではどうするか。

a[ href$='.mov' ]
{
/* mov拡張子へのアンカーに適用するスタイルを記述 */
}

$= というのが、値の最後が指定された文字列で終わる場合のセレクタの記述方法だ。逆に、最初からのマッチは^=で行う。例えば、このブログ内へのリンクに適用するためのセレクタを記述したいなら。

a[ href^='http://cpplover.blogspot.com/' ]
{
/* このブログ内へのアンカーに適用するスタイルを記述 */
}

また、グループ化できる。

a[href$='.rss'], a[href$='.atom']
{
/* RSSかATOMフィードへのアンカーに適用するスタイルを記述 */
}

また、属性の場所を問わず、文字列に部分マッチするには、次のようにする

a[ href*='opera.com' ]
{
/* opera.com へのアンカーすべてに適用するスタイルを記述 */
}