CSSでのセレクタ(選択子)の一つである、属性セレクタに関して解説します。
属性セレクタとは、特定の属性を持つ要素に適用するセレクタです。
属性セレクタには幾つかのタイプがあります。
-」が続く場合に有効です。HTMLなどのlang属性の値に対応します。以下、順番に解説します。
当該属性名の属性があれば、その属性値を問わず対象となる属性セレクタです。
属性セレクタのうち、当該属性名の属性があればその属性値を問わず対象とする場合の書式は、以下のようになります。
セレクタ[属性名]{…}
ここで、セレクタ
としては、
*」となりますが、要素名を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。
例えば、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">要素等がこのセレクタの対象となります。
CSSの仕様書に依れば、属性値及び「属性値に含まれる語句」が以下の場合は、文法上「"」か「'」で囲まなくても構わない事になっております。
つまり、半角数字やハイフンで始まっておらず、途中に空白や英数字・カナ以外の半角文字を含まない限りは「"」か「'」で囲まなくても構わない事になります。
しかしながら、このような制約を覚えるのはかなり面倒かと思われますので、何も考えずに「"」か「'」で囲む習慣をつける事をお奨めします。
"」か「'」で囲まないとエラーになるケースはまず無いので大丈夫でしょう。では、属性セレクタを認識出来ません。
在来HTML(HTML 3.2, HTML 4.01及びISO-HTML)は属性名の大文字小文字を区別しません。
しかし、XHTMLを含むXMLでは大文字小文字を区別しますので、絶対に大文字小文字を間違えないようにして下さい。
特にXHTMLの属性名は現在のところ全て小文字ですので、大文字を入れた場合、認識されない事になります。
WAP 2.0では、属性セレクタは仕様に含まれておりません。
