属性セレクター

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

セレクター	例	説明
[attr]	a[title]	attr という属性名を持つ要素と一致します（値を角括弧の中に入れます）。
[attr=value]	a[href="https://example.com"]	attr という属性名で値が value と完全一致する要素と一致します。文字列は引用符の中に入れます。
[attr~=value]	p[class~="special"]	値が正確に value である attr の属性名を持つ要素、または 1 つ以上の値を含む attr 属性を持つ要素に一致します。複数の値のリストでは、個別の値が空白で区切られていることに注意してください。
[attr|=value]	div[lang|="zh"]	値が正確に value であるか、または value の直後にハイフンが続く値で始まるattr 属性を持つ要素に一致します。

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

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

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

セレクター	例	説明
[attr^=value]	li[class^="box-"]	値が value で始まる attr 属性（名前は角括弧内の値）を持つ要素に一致します。
[attr$=value]	li[class$="-box"]	値が value で終わる attr 属性を持つ要素に一致します。
[attr*=value]	li[class*="box"]	文字列内の任意の場所に value を含む attr 属性を持つ要素に一致します。

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

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

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

属性値を大文字小文字を区別せずに照合したい場合は、閉じ括弧の前に値 i を使うことができます。このフラグは、ブラウザーに ASCII 文字を大文字小文字を区別せずに照合するように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従って照合されます - HTML の場合は大文字小文字を区別します。

下の例では、最初のセレクターは a で始まる値に一致します。他の 2 つのリストアイテムは大文字の A で始まるので、最初のリストアイテムにのみ一致します。 2 つ目のセレクターは大文字と小文字を区別しないフラグを使用しているので、すべてのリストアイテムに一致します。

これで属性セレクターが完了しました。次の記事に進んで、pseudo-class and pseudo-element selectorsについて読むことができます。

• 前のページ
• Overview: CSS の構成要素
• 次のページ