[5] [DFN[[RUBYB[[[属性選択子]]]@en[attribute selector]]]]は、[[要素]]の[[属性]]を表します [SRC[>>4]]。 * 仕様書 [REFS[ - [4] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ]REFS] * 意味 [6] [[属性選択子]]は、それに一致する[[属性]]を持つ[[要素]]と[[一致]]します [SRC[>>4]]。 [26] [[属性]]がどのように与えられるかには依存しません。 [[DTD]] や [[XML Schema]]、 [[利用者エージェント]]に組み込まれた[[語彙]]の知識などで間接的に[[既定値]]として与えられた[[属性]]であっても、 [[文書木]]に反映されていれば[[選択子]]の適用対象となり得ます。 [SRC[>>4]] [27] しかし [[XML]] では[[外部部分集合]]を[[処理]]することが義務付けられていないなど、 必ずしも[[文書木]]にそのような[[属性]]が含まれているとは限りません。従って、 [[選択子]]は[[既定値]]に左右されないように書く[['''べきです''']] [SRC[>>4]]。 ;; [37] 実際には[[Webブラウザー]]は [WEAK[([[XML]] 仕様上義務付けられている)]] [[内部部分集合]]内の[[既定値]]は [WEAK[([[DOM]] に反映されるので)]] [[選択子]]の処理で考慮しますが、[[外部部分集合]]や[[引数実体]]内の[[既定値]]、 [[XML Schema]] その他の[[スキーマ言語]]の[[既定値]]は考慮しませんし、 また[[スキーマ]]以外の根拠を持つ[[既定値]]も使いません。 * 属性選択子の種類 [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]]''']''']] - [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)[ ]PRE] ... と一致します。しかし、 [PRE(CSS example code)[ [tokens~="hoge fuga"] ]PRE] や [PRE(CSS example code)[ [tokens~=""] ]PRE] ... とは一致しません。 ]EG] ;; [29] [[空白]]の定義はいろいろありますが、ここでの[[空白]]は[[空白 (CSS)]] です。[[マーク付け言語]]によっては違った[[空白]]の定義を採用しているかもしれません。 ;; [32] [CODE@en[[[class]]]] [[属性]]には[[クラス選択子]]があります。 [CODE(CSS[[[~=]]]] とほとんど同じですが[[詳細度]]が異なります。 ** [CODE(CSS)[|=]] [16] [CODE(CSS)[[[|=]]]] の後に[[属性値]]が続く場合、その値と一致するか、またはその値の後に [CODE(CSS)[[[-]]]] が続くような[[属性値]]が指定されていることを表します。 [SRC[>>4]] [EG[ [17] 例えば、 [PRE(CSS example code)[ [lang|=ja] ]PRE] ... は [PRE(XML example code)[ ]PRE] ... や [PRE(XML example code)[ ]PRE] ... と一致します。 ]EG] ;; [30] これは [[RFC 4647]] の[[基本濾過]]と似ていますが、 [CODE(lang)[[[*]]]] が使えない点が異なります。 ;; [33] [CODE(HTMLa)@en[[[lang]]]] [[属性]]には [CODE(CSS)@en[[[:lang]]]] [[擬似クラス]]があります。 ** [CODE(CSS)[^=]], [CODE(CSS)[*=]], [CODE(CSS)[$=]] [18] [CODE(CSS)[^=]], [CODE(CSS)[*=]], [CODE(CSS)[$=]] の後に[[属性値]]が続く場合、 それぞれ[[属性値]]の先頭、任意の位置、末尾にその値が含まれていることを表します。 [SRC[>>4]] * 構文 [19] [[属性名]]は [[CSS修飾名]]です。 [SRC[>>4]] [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]]]] の[[属性値]]の[[大文字]]・[[小文字]]を区別''しません''。 ** 名前空間接頭辞 [20] [[属性選択子]]は[[既定名前空間]]を使いません。[[名前空間接頭辞]]と [CODE(CSS)[[[|]]]] を省略すると、[[null名前空間]]を表します。 [SRC[>>4]] [21] [[属性選択子]]の[[名前空間接頭辞]]が[[空文字列]]なら、[[null名前空間]]を表します。 [SRC[>>4]] [22] [[属性選択子]]の[[名前空間接頭辞]]が [CODE(CSS)[[[*]]]] なら、任意の[[名前空間]]を表します。 [SRC[>>4]] これには[[null名前空間]]も含まれます。 ;; [23] [[null名前空間]]については明記されていませんが、含まれるのでしょう。 [24] その他の[[名前空間接頭辞]]は、[[宣言]]されている[[名前空間URL]]を表します。 [SRC[>>4]] * 妥当性 [25] [[宣言]]されていない[[名前空間接頭辞]]を使った[[属性選択子]]は[[非妥当]]です。 [SRC[>>4]] * 変種 [1] [CITE[jQuery: CSS]] [[JavaScript]] による[[選択子]]の実装ですが、 [[属性名]]の前には [CODE@en[@]] をつけなければなりません。 ([[名無しさん]] [WEAK[2006-06-06 11:55:35 +00:00]]) * 歴史 ** 属性選択子の誕生 [REFS[ - [41] [CITE[STSS 2]] ([[Daniel Glazman]] 著, [TIME[2000-09-09 01:13:50 +09:00]] 版) - [48] [CITE@en[Selectors]] ([TIME[1997-11-08 03:00:17 +09:00]] 版) - [50] [CITE@en[Selectors]] ([TIME[2001-01-16 00:22:58 +09:00]] 版) ]REFS] [42] [[STTS2]] では[[属性選択子]]として[[属性]]の存在、 [CODE(CSS)[[[=]]]] (完全一致)、 [DFN[[CODE(CSS)[[[==]]]]]] (現在の [CODE(CSS)[[[~=]]]]) が定義されていました。 [39] [[属性選択子]]は [[CSS2]] で正式に[[選択子]]に導入されました。当初は [[STTS2]] (>>41) を引き継ぎ、 >>42 の3種類が定義されていました。 [43] また[[属性名]]の前に [DFN[[CODE(CSS)[[[^]]]]]] をつけることでその[[属性]]を[[文書木]]から削除することを表していました。 [[STTS3]] ではより一般的な形に拡張されています。 ;; この機能は [[CSS]] には取り込まれていません。 ** [CODE(CSS)[|=]] の追加 [REFS[ - [51] [CITE@en[Selectors]] ([TIME[1998-03-25 23:00:31 +09:00]] 版) - [34] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]REFS] [49] >>50 の次の [[PR]] である >>51 で [CODE(CSS)[[[|=]]]] が追加されました。 [38] [[CSS2]] は[[名前空間]]の扱いを規定していませんでしたが、現実には[[属性選択子]]と[[XML名前空間]]の両方に対応している [[CSS2]] 世代の[[利用者エージェント]]はありませんでした。 ** 選択子3 [REFS[ - [44] [CITE[CSS Namespace Enhancements (Proposal)]] ([TIME[1999-06-26 07:15:29 +09:00]] 版) - [46] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-04-11 01:57:05 +09:00]] 版) ]REFS] [45] [[名前空間接頭辞]]をつけて[[名前空間]]に対応することが >>44 で提案され、 >>46 以後の[[選択子]]仕様に取り込まれています。 [REFS[ - [47] [CITE@en[CSS3 module: W3C Selectors]] ([TIME[2000-10-06 02:05:50 +09:00]] 版) ]REFS] [36] >>47 で [CODE(CSS)[[[^=]]]], [CODE(CSS)[[[$=]]]], [CODE(CSS)[[[*=]]]] が追加されました。 * 実装 [40] [[IE7]] [[以下]]は[[属性選択子]]に対応していなかったため、[[Webサイト]]では長らく[[属性選択子]]は使えませんでした。 * 関連 [28] [[クラス選択子]]、[[ID選択子]]、[CODE(CSS)@en[[[:lang]]]] のような特定用途に特化した[[属性選択子]]と言えるような[[選択子]]もあります。 [31] [[型選択子]]には[[普遍選択子]]がありますが、 [[属性選択子]]にはそれに相当するものがありません。