[5] [DFN[[RUBYB[[[属性選択子]]]@en[attribute selector]]]]は、[[要素]]の[[属性]]を表します
[SRC[>>4]]。

* 仕様書

[REFS[
- [4] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#attribute-selectors>
]REFS]

* 意味

[6] [[属性選択子]]は、それに一致する[[属性]]を持つ[[要素]]と[[一致]]します [SRC[>>4]]。

* 属性選択子の種類

[7] [[属性選択子]]には次の種類があります [SRC[>>4]]。
- [CODE(CSS)['''['''[VAR[attr]]''']''']]
- [CODE(CSS)['''['''[VAR[attr]]=[VAR[value]]''']''']]
- [CODE(CSS)['''['''[VAR[attr]]~=[VAR[value]]''']''']]
- [CODE(CSS)['''['''[VAR[attr]]|=[VAR[value]]''']''']]

** 属性値なし

[12] [[属性名]]だけの指定の場合、[[属性]]が存在していることを表します [SRC[>>4]]。 

** [CODE(CSS)[=]]

[13] [CODE(CSS)[[[=]]]] で[[属性値]]が指定されている場合、[[完全一致]]で等しい値が指定されていることを表します
[SRC[>>4]]。

** [CODE(CSS)[~=]]

[14] [CODE(CSS)[[[~=]]]] で[[属性値]]が指定されている場合、当該[[属性]]の値を[[空白]]区切りにしたときに、
そのいずれかと値が一致することを表します。[[空白]]区切りの結果のいずれかと比較されるため、
[[選択子]]で指定した値が[[空白]]を含んでいる場合や、[[空文字列]]である場合には、何とも一致しません。
[SRC[>>4]]

[EG[
[15] 例えば、
[PRE(CSS example code)[
[tokens~="hoge"]
]PRE]
... は
[PRE(XML example code)[
<foo tokens="hoge  fuga abc  "/>
]PRE]
... と一致します。しかし、
[PRE(CSS example code)[
[tokens~="hoge  fuga"]
]PRE]
や
[PRE(CSS example code)[
[tokens~=""]
]PRE]
... とは一致しません。
]EG]

** [CODE(CSS)[|=]]

[16] [CODE(CSS)[[[|=]]]] の後に[[属性値]]が続く場合、その値と一致するか、またはその値の後に
[CODE(CSS)[[[-]]]] が続くような[[属性値]]が指定されていることを表します。 [SRC[>>4]]

[EG[
[17] 例えば、
[PRE(CSS example code)[
[lang|=ja]
]PRE]
... は
[PRE(XML example code)[
<foo lang="ja"/>
]PRE]
... や 
[PRE(XML example code)[
<foo lang="ja-JP"/>
]PRE]
... と一致します。
]EG]

* 構文

[8] [[属性値]]を指定する場合は [[CSS]] の[[識別子]]または[[文字列]]として記述し[['''なければなりません''']]
[SRC[>>4]]。

* 大文字と小文字

[9] [[属性名]]と[[属性値]]の[[大文字]]と[[小文字]]を区別するかは[[マーク付け言語]]に依存します。
[SRC[>>4]]

[10] [[HTML]] [[文書]]では[[属性名]]の[[大文字]]と[[小文字]]を区別しません。
[[XML]] [[文書]]では区別します。

[11] [[HTML名前空間]]の一部の[[要素]]では[[属性値]]の[[大文字]]と[[小文字]]を区別しません。

[2]

- [[Firefox]] 2.0, [[Opera]] 9 共、 [[XHTML]] や [[XML]] の[[属性値]]に対しては[[大文字]]・[[小文字]]を区別''します''。
- [[WinIE 6]] は [[HTML]] の[[属性値]]に対しては[[大文字]]・[[小文字]]を区別''します''。
- [[Firefox]] 2.0、[[Opera]] 9 共、[[HTML]] の[[属性値]]について:
-- [CODE(HTMLa)@en[[[align]]]] ([[列挙型]]),
[CODE(HTMLa)@en[[[lang]]]] ([[言語札]])、
[CODE(HTMLa)@en[[[type]]]] ([[媒体型]]) は[[大文字]]・[[小文字]]を区別''しません''。
-- [CODE(HTMLa)@en[[[class]]]] ([[無奇癖モード]]、[[奇癖モード]]共)、[CODE(HTMLa)@en[[[compact]]]] ([[ブール型]])、
[CODE(HTMLa)@en[[[href]]]] ([[URI]])、
[CODE(HTMLa)@en[[[id]]]] ([[識別子]])、
[CODE(HTMLa)@en[[[name]]]]、
[CODE(HTMLa)@en[[[title]]]] ([[テキスト]]) は[[大文字]]・[[小文字]]を区別''します''。

[3]
[[Opera]] 9 は [[HTML]] で [CODE(HTMLa)@en[[[accesskey]]]] の[[属性値]]の[[大文字]]・[[小文字]]を区別''します''。

[[Firefox]] 2.0 は [[HTML]] で [CODE(HTMLa)@en[[[accesskey]]]] の[[属性値]]の[[大文字]]・[[小文字]]を区別''しません''。

* 変種

[1]
[CITE[jQuery: CSS]] <http://jquery.com/docs/CSS/>

[[JavaScript]] による[[選択子]]の実装ですが、
[[属性名]]の前には [CODE@en[@]] をつけなければなりません。
([[名無しさん]] [WEAK[2006-06-06 11:55:35 +00:00]])