属性セレクタ Attribute selectors

HTMLの属性（アトリビュート）にマッチるセレクタ

CSS2 からは，HTML などの構造化言語に定められた属性にマッチさせる規則を指定することができます。

セレクタ内の属性名と属性値について，大文字と小文字を区別するかどうかは構造化言語に依存します。例えば HTML 4.01 では属性名の大文字と小文字の区別はありませんが，XML応用であるXHTML などでは区別されます。

id=#Open と id=#open は別のセレクターとして扱われます。

CSS2 の属性セレクタ構文には下記に示す4種類があり，これらは単純セレクタの直後に幾つでも取り付けることができます。

[属性名]

属性値に関わらず，指定された属性を持つ要素にマッチします。

例

次例の規則は，属性値に関わらずname属性を持つすべてのa要素にマッチします：

a[name] { text-decoration: none; }

複式の属性セレクタを用いると，要素が持つ複数の属性を参照することができます：

a[href][title] { cursor: help; }

この規則は，href属性とtitle属性を持つすべてのa要素にマッチすることになります。

[属性名="属性値"]

指定された属性およびその値を持つ要素にマッチします。

例

次例の規則は，name属性の値としてattr が指定されているすべての要素にマッチします：

[name="attr"] { font-family: monospace; }

複式の属性セレクタを用いると，要素が持つ複数の属性とその値を参照することができます：

input[type="text"][name="attr"] { font-family: monospace; }

この規則はtype属性値がtext で，name属性値がattr であるinput要素にマッチします。

[属性名~="属性値"]

属性値が空白類文字で区切られた単語のリストになっており，その中に指定された値を含む要素にマッチします。

例

次例の規則は，rel属性値の単語リストのうち，help という値が含まれているa要素にマッチします：

a[rel~="help"] { cursor: help; }

この規則は単独指定のrel="help" や，複数指定のrel="helpstart" などにマッチします。

次例の規則は，rel属性値の単語リストのうち，help およびstart という値を含むa要素にマッチします：

a[rel~="help"][rel~="start"] { color: red; }

この規則はrel="helpstarttop"などにはマッチしますが，単独のrel="help" にはマッチしません。

[属性名|="属性値"]

指定された属性の値がハイフンで区切られた語の場合に，その先頭の語と適合する要素にマッチします。

例

次例の規則は，lang属性にen やen-US などの言語コードが指定されているem要素にマッチします：

em[lang|="en"] { font: italic 100% serif; }

CSS2 からは，言語情報に基づいたマッチングを行う仕組みとして:lang()疑似クラスも提供されています。