CSS3の属性セレクタを使ったスタイリング

属性セレクタとは、指定した属性と一致した場合にスタイルが適用されるセレクタであり、CSS3からは部分的に値が一致していればスタイルを適用することもできるようになっています。そこでいくつかの属性セレクタを見てみたいと思います。

属性セレクタの種類

以下が属性セレクタの種類と記述例となります。

[attribute]

これは、attributeという名前の属性を持った要素がある場合にスタイルが適用されます。

[attribute=”value”]

これは、要素の中で指定した値と完全一致した場合にスタイルが適用されます。

[attribute^=”value”]

これは、指定した属性の値が前方一致した場合にスタイルが適用されます。

[attribute$=”value”]

これは、指定した属性の値が後方一致した場合にスタイルが適用されます。

[attribute*=”value”]

これは、指定した属性の値が部分一致した場合にスタイルが適用されます。

実際の使い方

それでは実際にどのような感じで使用するのか一例を見てみます。

a[href^="http://"] {
  background: url(images/blank.png) no-repeat right 0;
  padding-right: 20px;
}

例えば、外部リンクを設置している場合に、別ウィンドウで開くことを示すアイコンをつけることがあります。上記のような指定をすると、http://で始まるリンクの場合はアイコンが表示されます。これならば1つ1つの外部リンクにclassを付与してアイコンを表示させるといった手間も省けます。
これは、外部リンクの場合にはスタイルを適用させるといった前方一致を利用したものだが、似たような感じでリンクにアイコンをつける場合として、PDFファイルやzipファイルなどのリンクがある場合にもそれを示すアイコンを表示させることがあります。この場合も1つずつclassを付与してあげるのは面倒なので、後方一致を利用してアイコンを表示させることができます。

a[href$=".pdf"] {
  background: url(images/icon_pdf.png) no-repeat right 0;
  padding-right: 20px;
}

a[href$=".zip"] {
  background: url(images/icon_zip.png) no-repeat right 0;
  padding-right: 20px;
}

このように、拡張子を判別してその拡張子と一致した場合にはそれぞれのアイコンを表示させるといったこともできるようになります。

その他の記事
動画をレスポンシブWebデザインに対応させる方法
SVGを使ったクリッピングマスク
【PHP】演算子について
【CSS】calc()を使った可変レイアウト
CSS グリッドレイアウトの基本

TOP