属性セレクタ。

当該属性名がある要素に適用する属性セレクタの書式。

属性セレクタのうち、当該属性名の属性があればその属性値を問わず対象とする場合の書式は、以下のようになります。

セレクタ[属性名] { … }

ここで、セレクタとしては、

• 特定の属性を持つ特定の要素なら当該要素のタイプセレクタ(型セレクタ・要素セレクタ)つまり要素名
• 要素名を問わない場合は全称セレクタ(汎用セレクタ)つまり「*」

となりますが、要素名を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。

当該属性名がある要素に適用する属性セレクタの記述例。

例えば、href属性を持つ<a>要素、すなわち<a href="…">要素へのセレクタは、

a[href] { … }

と記述します。

指定された値の指定された属性がある要素に適用する属性セレクタの書式。

属性セレクタのうち、当該属性名の属性値が指定された値である場合に対象とする場合の書式は、以下のようになります。

セレクタ[属性名=属性値] { … }

• セレクタは当該属性名がある要素に適用する属性セレクタと同じです。

指定された値の指定された属性がある要素に適用する属性セレクタの記述例。

例えば、type="image/gif"属性を持つ<object>要素、すなわち<object type="image/gif">要素へのセレクタは、

object[type="image/gif"] { … }

と記述します。

指定された属性に特定の語句を含む要素に適用する属性セレクタの書式。

属性セレクタのうち、当該属性名の属性値に指定した語句が含まれている場合に対象とする場合の書式は、以下のようになります。

この場合、以下のように記述します。

セレクタ[属性名~=属性値に含まれる語句] { … }

• 属性値に含まれる語句には空白文字を含める事は出来ません。
• セレクタは当該属性名がある要素に適用する属性セレクタと同じです。

指定された属性に特定の語句を含む要素に適用する属性セレクタの記述例。

例えば、rel属性に「nofollow」値を含める<a>要素、すなわち<a type="… nofollow …">要素へのセレクタは、

a[type~="nofollow"] { … }

と記述します。

この場合、

• <a rel="nofollow">要素
• <a rel="nofollow ○○">要素
• <a rel="○○ nofollow">要素

等がこのセレクタの対象となります。

指定された属性に特定の語句で始まる要素に適用する属性セレクタの書式。

属性セレクタのうち、当該属性名の属性値が指定した語句で始まっている場合に対象とする場合の書式は、以下のようになります。

セレクタ[属性名|=属性値に含まれる語句] { … }

• 属性値に含まれる語句には空白文字を含める事は出来ません。
• セレクタは当該属性名がある要素に適用する属性セレクタと同じです。

指定された属性に特定の語句で始まる要素に適用する属性セレクタの記述例。

例えば、lang属性が「ja」で始まる<q>要素(日本語文章を内容に持つ<q>要素)、すなわち<q lang="ja">要素または<q lang="ja-…">要素へのセレクタは、

q[lang|="ja"] { … }

と記述します。

この場合、

• <q lang="ja">要素
• <q lang="ja-jp">要素

等がこのセレクタの対象となります。