属性セレクター

存在や値のセレクター

これらのセレクターにより、要素を属性が存在するか（href など）、または属性の値に対して様々な方法で一致させて選択できるようになります。

以下の例では、これらのセレクターが使用されていることがわかります。

• li[class] を使用することで、 class 属性を持つ任意のセレクターに一致させることができます。これは、最初のものを除いたすべてのリストアイテムに一致します。
• li[class="a"] は、a のクラスを持つセレクターには一致しますが、別のスペースで区切られたクラスを値の一部として持つ a のクラスを持つセレクターには一致しません。2 番目のリストアイテムを選択します。
• li[class~="a"]は、 a のクラスを持つセレクターに一致しますが、空白で区切られたリストの一部に a のクラスを含む値にも一致します。2 番目と 3 番目のリストアイテムを選択します。

<h1>属性の存在や値のセレクター</h1>
<ul>
  <li>アイテム 1</li>
  <li class="a">アイテム 2</li>
  <li class="a b">アイテム 3</li>
  <li class="ab">アイテム 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class] {
  font-size: 120%;
}
li[class="a"] {
  background-color: yellow;
}
li[class~="a"] {
  color: red;
}

部分文字列照合セレクター

これらのセレクターは、属性の値の中の部分文字列をより高度に照合させることができます。例えば、 box-warning と box-error のクラスがあり、文字列 "box-" で始まるものを全て一致させたい場合、 [class^="box-"] を使用して両方を選択することができます（上記の通り、 [class|="box"] でもできます）。

（参考: 長い間 ^ と $ は正規表現において、それぞれ 先頭 と 末尾 を意味する アンカー として使用されてきたことに注意すると有用かもしれません。）

次の例は、これらのセレクターの使用法を示しています。

• li[class^="a"] は a で始まる属性値に一致するので、最初の 2 つのリストアイテムに一致します。
• li[class$="a"] は a で終わる属性値に一致するので、最初と 3 番目のリストアイテムに一致します。
• li[class*="a"]は、a が文字列のどこかに現れる属性値に一致します。

<h1>属性の部分文字列照合セレクター</h1>
<ul>
  <li class="a">アイテム 1</li>
  <li class="ab">アイテム 2</li>
  <li class="bca">アイテム 3</li>
  <li class="bcabc">アイテム 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class^="a"] {
  font-size: 120%;
}
li[class$="a"] {
  background-color: yellow;
}
li[class*="a"] {
  color: red;
}

まとめ

これで属性セレクターについては終了です。次の記事では続いて、擬似クラスと擬似要素セレクターについて説明します。

• 前のページ
• Overview: CSS によるスタイル設定の基本
• 次のページ