[5] [DFN[[RUBYB[[[属性選択子]]]@en[attribute selector]]]]は、[[要素]]の[[属性]]を表します [SRC[>>4]]。 * 仕様書 [REFS[ - [4] '''[CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ''' - [77] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2011-11-12 00:22:26 +09:00]] 版) - [98] [CITE@en-US-x-hixie[WebVTT Standard]] ([TIME[2012-11-05 21:05:39 +09:00]] 版) ]REFS] * 意味 [6] [[属性選択子]]は、それに一致する[[属性]]を持つ[[要素]]と[[一致]]します [SRC[>>4]]。 [26] [[属性]]がどのように与えられるかには依存しません。 [[DTD]] や [[XML Schema]]、 [[利用者エージェント]]に組み込まれた[[語彙]]の知識などで間接的に[[既定値]]として与えられた[[属性]]であっても、 [[文書木]]に反映されていれば[[選択子]]の適用対象となり得ます。 [SRC[>>4]] [27] しかし [[XML]] では[[外部部分集合]]を[[処理]]することが義務付けられていないなど、必ずしも[[文書木]]にそのような[[属性]]が含まれているとは限りません。従って、 [[選択子]]は[[既定値]]に左右されないように書く[['''べきです''']] [SRC[>>4]]。 ;; [37] 実際には[[Webブラウザー]]は [WEAK[([[XML]] 仕様上義務付けられている)]] [[内部部分集合]]内の[[既定値]]は [WEAK[([[DOM]] に反映されるので)]] [[選択子]]の処理で考慮しますが、[[外部部分集合]]や[[引数実体]]内の[[既定値]]、 [[XML Schema]] その他の[[スキーマ言語]]の[[既定値]]は考慮しませんし、また[[スキーマ]]以外の根拠を持つ[[既定値]]も使いません。 [97] [[WebVTT]] では[[WebVTT中間節点オブジェクト]]について、 [CODE@en[[[v]]]] と [CODE@en[[[lang]]]] は特定の[[属性]]だけが存在しているように、それ以外は[[属性]]が存在しないように扱うことになっています。 [SRC[>>98]] ;; [99] [CODE@en[[[c]]]] は対応する[[属性]]が規定されておらず、存在しません。[[クラス選択子]]を使う必要があります。 ;; [100] また [[WebVTT節点オブジェクトのリスト]]は[[ID選択子]]と[[一致]]しますが、 [[要素]]に相当するものでは無いようで、[[属性]]に相当するものも (明記されていませんが) 存在しないようです。 * 属性選択子の種類 [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)[[[~=]]]] とほとんど同じですが[[詳細度]]が異なります。 *** 空文字列 [57] [[選択子]]で指定した値が[[空文字列]]である場合には、何とも一致しません [SRC[>>4]]。 [56] [[値]]や[[属性値]]が[[空文字列]]の場合について以前は仕様書は明記していませんでしたが、当時の規定も文字通り解釈すれば、[[空]]の[[値]]はどんな[[属性値]]とも[[一致]]しませし、 [[空]]の[[属性値]]はどんな[[値]]とも[[一致]]しません。 [58] [[Firefox]] 2.0 も [[Opera]] 9 も、 >>56 の通りに実装しているようです。 *** 空白 [59] [[Firefox]] 2.0 の[[空白]]に [CODE(char)[[[U+000C]]]] は含まれていないようです。 [60] [[Opera]] 9 の[[空白]]は [CODE(CSS)[[[~=]]]] では [CODE(char)[[[U+0020]]]] だけ、 [[クラス選択子]]では通常の[[空白]]に加えて [CODE(char)[[[U+000B]]]] も含まれるようです。 [61] [[Opera]] 9 はなぜか [CODE(CSS)[\a]] を [CODE(char)[[[U+000B]]]] と解釈します。 ;; それ以外に[[改行]]の[[正規化]]は行っていないようです。 [62] [[属性値]]の先頭や末尾の[[空白]]が無視されるのかどうか仕様書は明記していません。 [63] [[Firefox]] 2.0 も [[Opera]] 9 も無視するようです。 [64] テスト: [REFS[ - [CODE(CSS)[[[~=]]]] -- -- - [[クラス選択子]] -- -- ]REFS] ** [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]]]] [[擬似クラス]]があります。 *** 空の値 [52] 仕様書には[[値]]が[[空文字列]]の場合について特に言及はありませんが、文字通りに解釈すると、[[属性値]]が[[空文字列]]の場合や [CODE(char)[[[-]]]] から始まる場合に[[一致]]することになります。 [53] [[Firefox]] 2.0 は >>52 のように解釈しますが、 [[Opera]] 9 は何とも[[一致]]しないと解釈するようです。 ;; [REFS[ - ]REFS] *** 空白 [54] [[Firefox]] 2.0 でも [[Opera]] 9 でも、 [[値]]や[[属性値]]の中間の[[空白]]に関して[[比較]]の際に特に[[正規化]]は行われないようです。 [55] ただし [[Opera]] 9 では[[値]]の [CODE(char)[[[U+000A]]]] がなぜか[[属性値]]の [CODE(char)[[[U+000B]]]] と[[一致]]します。 ;; [REFS[ - ]REFS] [5] [[Firefox]] 2.0 は[[属性値]]の先頭や末尾に[[零]]個以上の [CODE(char)[[[U+0009]]]], [CODE(char)[[[U+000A]]]], [CODE(char)[[[U+000D]]]] の任意の組み合わせがあると、無視して[[比較]]します。むしろ[[値]]の先頭や末尾にこれらを明示しても[[一致]]しません。 ;; [REFS[ - - ]REFS] ** [CODE(CSS)[^=]], [CODE(CSS)[*=]], [CODE(CSS)[$=]] [18] [CODE(CSS)[^=]], [CODE(CSS)[*=]], [CODE(CSS)[$=]] の後に[[属性値]]が続く場合、それぞれ[[属性値]]の先頭、任意の位置、末尾にその値が含まれていることを表します。 [SRC[>>4]] * 構文 [19] [[属性名]]は [[CSS修飾名]]です。 [SRC[>>4]] [8] [[属性値]]を指定する場合は [[CSS]] の[[識別子]]または[[文字列]]として記述し[['''なければなりません''']] [SRC[>>4]]。 [74] [[属性値]]は[[数字]]からはじまると[[識別子]]ではなく[[数]]とみなされてしまうので、 [[非妥当]]になります。 [REFS[ - [75] ]REFS] ** 名前空間接頭辞 [20] [[属性選択子]]は[[既定名前空間]]を使いません。[[名前空間接頭辞]]と [CODE(CSS)[[[|]]]] を省略すると、[[null名前空間]]を表します。 [SRC[>>4]] [21] [[属性選択子]]の[[名前空間接頭辞]]が[[空文字列]]なら、[[null名前空間]]を表します。 [SRC[>>4]] [22] [[属性選択子]]の[[名前空間接頭辞]]が [CODE(CSS)[[[*]]]] なら、任意の[[名前空間]]を表します。 [SRC[>>4]] これには[[null名前空間]]も含まれます。 ;; [23] [[null名前空間]]については明記されていませんが、含まれるのでしょう。 [24] その他の[[名前空間接頭辞]]は、[[宣言]]されている[[名前空間URL]]を表します。 [SRC[>>4]] * 大文字と小文字 ** 属性名 [9] [[属性名]]の[[大文字]]と[[小文字]]を区別するかは[[マーク付け言語]]に依存します。 [SRC[>>4]] [10] [[HTML文書]]中の[[HTML要素]]では[[属性名]]の[[大文字]]と[[小文字]]を区別しません。それ以外、すなわち [[HTML文書]]中の [[HTML]] 以外の[[要素]]や [[XML文書]]では区別します。 [SRC[>>77]] [105] これは厳密には次のようにしなければ[['''ならない''']] [SRC[>>77]] と定義されています。 - [106] [[HTML文書]]の[[HTML要素]]の[[名前空間なし]]の[[属性]]の名前と比較する時は、 [[ASCII小文字]]に変換する。 - [107] それ以外では、そのままとする。 - [108] いずれにせよ、比較自体は大文字と小文字を区別して行う。 ;; [109] すなわち、[[CSS]] 側の[[属性名]]の大文字と小文字の違いは無視されますが、 [[DOM]] 側の違いは無視されません。 (ただし [[HTML構文解析器]]によって作られた [[HTML]] の[[属性]]はすべて小文字になっています。) ** 属性値 [76] [[属性値]]の[[大文字]]と[[小文字]]を区別するかは[[マーク付け言語]]に依存します [SRC[>>4]]。 [93] [[XML文書]]では[[大文字]]と[[小文字]]を区別''します''。 [81] [[HTML文書]]では、一部の[[HTML要素]]で[[ASCII大文字・小文字不区別]]となります。それ以外は区別します。 [SRC[>>77]] ;; [83] [[JSON]] 形式のデータファイルにその一覧があります。 [REFS[ - [84] [CITE@en[data-web-defs/selectors.txt at master · manakai/data-web-defs]] ([TIME[2015-11-23 22:04:12 +09:00]] 版) - [85] [CITE@en[data-web-defs/selectors.json at master · manakai/data-web-defs]] ([TIME[2015-11-23 22:04:53 +09:00]] 版) ]REFS] ;; 歴史的には >>91 を参照。 [82] [[HTML Standard]] には [CODE(HTMLa)@en[[[type]]]] [[属性]]のみ、 [CODE(HTMLe)@en[[[ul]]]] [[要素]]や [CODE(HTMLe)@en[[[ol]]]] [[要素]]のとき大文字と小文字を区別する旨の注記がありますが、実際には [[Chrome]] も [[Firefox]] も、区別しないようにみえます。 [TIME[2015-11-23T11:08:53.200Z]] ** 名前空間接頭辞 [78] [[名前空間接頭辞]]は[[大文字]]と[[小文字]]を区別します。詳しくは[[CSS名前空間]]の項を参照してください。 * 妥当性 [25] [[宣言]]されていない[[名前空間接頭辞]]を使った[[属性選択子]]は[[非妥当]]です。 [SRC[>>4]] * 変種 [1] [CITE[jQuery: CSS]] [[JavaScript]] による[[選択子]]の実装ですが、 [[属性名]]の前には [CODE@en[@]] をつけなければなりません。 ([[名無しさん]] [WEAK[2006-06-06 11:55:35 +00:00]]) * 歴史 ** 前史 [REFS[ - [65] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-08-11 17:13:22 +09:00]] 版) - [67] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-10-07 10:35:41 +09:00]] 版) - [69] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-11-02 03:04:18 +09:00]] 版) - [71] [CITE[Cascading Style Sheets: a draft specification]] ([TIME[1995-11-02 03:04:18 +09:00]] 版) ]REFS] [66] ここでは[[属性]]の存在を表す[[属性選択子]]と [CODE(CSS)[[[=]]]] が提案されていましたが、構文が少し違っていました。 [68] 次の >>67 では現在の構文になりますが、[[水準2]]に格下げ(?)されていました。 [70] その次の >>69 では[[ID選択子]]だけ[[水準1]]、それ以外は[[水準2]]となっています。 (この時はまだ[[ID選択子]]は[[属性選択子]]の一種でした。) [72] しかし >>71 の次の仕様案では [[CSS2]] は削除されています。かわりに >>73 が発行されています。 [REFS[ - [73] [CITE[NOTE-css-potential-19970819]] ( ([TIME[2000-03-13 23:37:56 +09:00]] 版)) ]REFS] ** 属性選択子の誕生 [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)[[[*=]]]] が追加されました。 ** HTML [91] [[選択子]]仕様書は[[大文字]]と[[小文字]]の区別は[[マーク付け言語]]によるとして具体的には規定していませんでしたが、かわりに [[HTML]] 仕様書が [[HTML]] と [[XML]] の場合を規定しました。 [REFS[ - [90] [CITE@en[Web Applications 1.0 r6695 Update selector case-sensitivity matching rules, including dropping the list of magically case-insensitive values.]] ( ([TIME[2011-10-19 08:00:00 +09:00]] 版)) ]REFS] [11] 以前 (>>90 までの [[Web Applications 1,0]] 仕様と [[Gecko]]、[[WebKit]]、[[Presto]]) は [[HTML名前空間]]の一部の[[要素]]では[[属性値]]の[[大文字]]と[[小文字]]を区別しないことにしていました。 [2] - [[Firefox]] 2.0, [[Opera]] 9 共、 [[XHTML]] や [[XML]] の[[属性値]]に対しては[[大文字]]・[[小文字]]を区別''します''。 - [DEL[[[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]]]] の[[属性値]]の[[大文字]]・[[小文字]]を区別''しません''。 [92] [[HTML5]] は当初[[属性値]]についても特定の[[属性]]のみ[[ASCII大文字・小文字不区別]]とされていましたが、 >>90 によってすべて区別''する''ことになりました。 [80] その後 >>79 で2015年に元の仕様に戻されています。 [REFS[ - [79] [CITE@en[Restore case-insensitive attribute value selector matching · whatwg/html@a4313d3]] ([TIME[2015-11-23 19:57:20 +09:00]] 版) ]REFS] ** 選択子4 [REFS[ - [94] [CITE@en[Web Applications 1.0 r6676 Update UA style sheet to use new selector syntax]] ([TIME[2011-10-13 04:46:00 +09:00]] 版) ]REFS] [95] 以前は [[HTML]] の[[利用者エージェント・スタイル・シート]]は[[大文字]]と[[小文字]]の区別について[[注釈]]を使った特別な注記によって表していましたが、 [CODE(CSS)@en[[[i]]]] 記法の導入でこれを[[選択子]]だけで表現できるようになりました。 * 実装 [40] [[IE7]] [[以下]]は[[属性選択子]]に対応していなかったため、[[Webサイト]]では長らく[[属性選択子]]は使えませんでした。 * 関連 [28] [[クラス選択子]]、[[ID選択子]]、[CODE(CSS)@en[[[:lang]]]] のような特定用途に特化した[[属性選択子]]と言えるような[[選択子]]もあります。 [31] [[型選択子]]には[[普遍選択子]]がありますが、 [[属性選択子]]にはそれに相当するものがありません。 [96] [CITE['''['''whatwg''']''' '''['''Selectors4''']''' case-insensitive attribute value matching (in XML)]] ([TIME[2012-06-06 09:05:01 +09:00]] 版) [101] [CITE[IRC logs: freenode / #whatwg / 20121202]] ( ([TIME[2012-12-12 09:05:40 +09:00]] 版)) [102] [CITE[Introduction to CSSOM (1) - DOM ECMAScripting]] ( ([TIME[2012-02-18 20:10:11 +09:00]] 版)) [103] [CITE@en[Bug 24005 – Attribute values can't always be matched case-sensitively]] ( ([TIME[2014-02-10 22:40:09 +09:00]] 版)) [104] [CITE@en[Web Applications 1.0 r8253 Match reality better in terms of selector case-sensitivity]] ( ([TIME[2013-11-07 04:38:00 +09:00]] 版)) [110] [CITE@en[Web Applications 1.0 r8764 Try to clarify case matching rules for selectors]] ( ([TIME[2014-09-13 02:48:00 +09:00]] 版)) [FIG(quote)[ [FIGCAPTION[ [35] [CITE@en[Safari 9.0]] ([TIME[2015-11-04 23:34:07 +09:00]] 版) ]FIGCAPTION] > The following CSS4 selectors are now fully supported by Safari. > Case-insensitive attribute selectors ]FIG] [86] [CITE@en[''''''[''''''selectors4'''''']'''''' Spec for attribute value case-sensitivity is clearly to vague]] ([[Boris Zbarsky]] 著, [TIME[2016-01-22 13:34:57 +09:00]] 版) [87] [CITE@en[Point out case-insensitivity of i in ''''''[''''''foo=bar i'''''']'''''' · w3c/csswg-drafts@498c104]] ([TIME[2016-01-23 12:37:45 +09:00]] 版) [88] [CITE@en[Gloss the term "attribute selector" · whatwg/html@953b6f4]] ([TIME[2016-03-01 11:45:07 +09:00]] 版) [89] [CITE@en['''['''selectors''']''' Remove the Selectors-specific tokens, rephrase in terms o…]] ([[tabatkins]]著, [TIME[2016-12-16 07:16:49 +09:00]]) [111] [CITE@en[Remove the Selectors-specific tokens, per WG resolution.]] ([[tabatkins]]著, [TIME[2016-12-16 07:14:21 +09:00]]) [112] [CITE@en[Selectors: attr name in any NS on HTML elements are case-insensitive]] ([[SimonSapin]]著, [TIME[2017-06-05 14:29:46 +09:00]]) [113] [CITE@en[SVG should specify what CSS attribute selectors and class selectors match on · Issue #328 · w3c/svgwg]] ([TIME[2017-07-02 16:37:58 +09:00]])