CSS 属性選択子の詳細

CSS 2では属性選択子が導入されました。

属性選択子は、要素の属性および属性値に基づいて要素を選択することができます。

シンプルな属性選択

特定の属性を持つ要素を選択したい場合でも、属性値に関わらず、シンプルな属性選択子を使用できます。

例 1

タイトル（title）を含むすべての要素を赤色にする場合は、以下のように記述できます：

*[title] {color:red;}

自分で試してみてください

例 2

上記と同様に、href属性を持つアンカー（a要素）にのみスタイルを適用することができます：

a[href] {color:red;}

自分で試してみてください

例 3

複数の属性に基づいて選択することができます。属性選択子をリンクしていただけます。

例えば、hrefとtitle属性を持つHTMLリンクのテキストを赤色に設定するには、以下のように書くことができます：

a[href][title] {color:red;}

自分で試してみてください

例 4

この特性は創造的な方法で使用することができます。

例えば、alt属性を持つすべての画像にスタイルを適用して、これらの有効な画像を強調表示することができます：

img[alt] {border: 5px solid red;}

自分で試してみてください

ヒント：この特例は、診断よりもデザインに適しています。つまり、画像が本当に有効であるかどうかを確認するために使用されます。

例 5：XMLドキュメントに属性選択子を使用する

属性選択子はXMLドキュメントで非常に有用です。なぜなら、XML言語は要素名と属性名の用途に基づいて要素名と属性名を指定することを推奨しているからです。

例えば、太陽系の惑星を説明するために設計されたXMLドキュメントがあると仮定します。moons属性を持つすべてのplanet要素を選択し、赤色に表示して、moonsを持つ惑星に注目するために以下のように書くことができます：

planet[moons] {color:red;}

これにより、以下のタグのスライス内の2番目と3番目の要素のテキストが赤色に表示されますが、1番目の要素のテキストは赤色ではありません：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

効果を確認してください

具体的な属性値に基づいて選択

特定の属性を持つ要素を選択するだけでなく、さらに選択範囲を狭めることができます。特定の属性値を持つ要素のみを選択します。

例 1

例えば、Webサーバー上の特定のドキュメントへのリンクを赤色にするには、以下のように書くことができます：

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

自分で試してみてください

例 2

シンプルな属性選択子と同様に、複数の属性-値選択子をリンクして、ドキュメントを選択することができます。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

これにより、以下のタグ内の最初のリンクのテキストが赤色に変わりますが、2番目や3番目のリンクには影響しません：

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

自分で試してみてください

例 3

同様に、XML言語もこの方法を使用してスタイルを設定できます。

以下では、再び惑星の例に戻ります。moons属性の値が1のplanet要素を選択したい場合、以下のようにします：

planet[moons="1"] {color: red;}

上記のコードは以下のマークアップの2番目の要素を赤色にしますが、1番目と3番目の要素には影響しません：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

効果を確認してください

属性と属性値は完全に一致する必要があります

注意してください、この形式は属性値と完全に一致する必要があります。

属性値にスペースで区切られた値リストが含まれている場合、一致が問題になることがあります。

以下のマークアップスライスを考えてみてください：

<p class="important warning">この段落は非常に重要な警告です。</p>

p[class="important"] と記述すると、このルールは例示タグに一致しません。

特定の属性値に基づいて要素を選択する必要がある場合、以下のように記述する必要があります：

p[class="important warning"] {color: red;}

自分で試してみてください

部分属性値選択

属性値の単語リストの特定の単語に基づいて選択する必要がある場合、波ダッシュ（~）を使用する必要があります。

class属性にimportantを含む要素を選択したい場合、以下の選択子を使用できます：

p[class~="important"] {color: red;}

自分で試してみてください

波ダッシュを省略すると、完全値一致が必要とされています。

部分値属性選択子とポイントクラス名記法の違い

この選択子は、クラス選択子で議論したポイントクラス名記法と等価です。

つまり、p.important と p[class="important"] は HTML ドキュメントに適用される際に等価です。

では、「~＝」属性選択子がなぜ必要なのでしょうか？それは、classだけでなく、どんな属性にも使用できるからです。

たとえば、多くの画像を含むドキュメントがあって、その中で一部だけが画像である場合があります。その場合、title属性の一部属性選択子を使用して、これらの画像を選択することができます：

img[title~="Figure"] {border: 1px solid gray;}

このルールは、タイトルテキストに「Figure」を含むすべての画像を選択します。タイトル属性がないか、またはタイトル属性に「Figure」が含まれていない画像はマッチングしません。

自分で試してみてください

サブストリングマッチング属性選択子

以下に、CSS2が完成した後に発表されたより高度な選択子モジュールを紹介します。これは、より多くの部分値属性選択子を含んでいます。規範的な言い方では、「サブストリングマッチング属性選択子」と呼ばれます。

多くの現代のブラウザがこれらの選択子をサポートしており、IE7も含まれます。

以下はこれらの選択子の簡単な要約です：

タイプ 説明
[abc^="def"] abc属性値が「def」で始まるすべての要素を選択します
[abc$="def"] abc属性値が「def」で終わるすべての要素を選択します
[abc*="def"] abc属性値に「def」というサブストリングを含むすべての要素を選択します

これらの選択子には多くの用途があります。

例えば、CodeW3C.comにリンクしているすべてのリンクにスタイルを適用したい場合、すべてのこれらのリンクにclassを指定して、そのクラスに基づいてスタイルを書く必要はありません。以下のルールで十分です：

a[href*="codew3c.com"] {color: red;}

自分で試してみてください

ヒント：どんな属性でもこれらの選択子を使用できます。

特定属性選択子の種類

最後に特定の属性選択子を紹介します。以下の例を見てください：

*[lang|="en"] {color: red;}

上記のルールは、lang属性がenまたはen-で始まるすべての要素を選択します。したがって、以下のサンプルマークアップの最初の3つの要素が選択され、最後の2つの要素は選択されません：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

自分で試してみてください

一般的には、[att|="val"]はどんな属性と値に対しても使用できます。

HTMLドキュメントに一連の画像があり、それぞれの画像のファイル名が以下の形式であると仮定します： figure-1.jpg および figure-2.jpgそれでは、以下の選択子を使用してこれらのすべての画像をマッチングできます：

img[src|="figure"] {border: 1px solid gray;}

自分で試してみてください

もちろん、この属性選択子の最も一般的な用途は言語値をマッチングすることです。

CSS 選択子リファレンスマニュアル

選択子 説明
[attribute] 指定された属性を持つ各要素を選択します。
[attribute=value] 指定された属性と値を持つ各要素を選択します。
[attribute~=value] 指定された語を含む属性値を持つ各要素を選択します。
[attribute|=value] 指定された値で始まる属性値を持つ要素を選択します。この値は、単語全体でなければなりません。
[attribute^=value] 指定された値で始まる属性値を持つ各要素に一致します。
[attribute$=value] 指定された値で終わる属性値を持つ各要素に一致します。
[attribute*=value] 指定された値を含む属性値を持つ各要素に一致します。