仕様書

意味

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

[26] 属性がどのように与えられるかには依存しません。 DTD や XML Schema、 利用者エージェントに組み込まれた語彙の知識などで間接的に既定値として与えられた属性であっても、 文書木に反映されていれば選択子の適用対象となり得ます。 >>4

[27] しかし XML では外部部分集合を処理することが義務付けられていないなど、 必ずしも文書木にそのような属性が含まれているとは限りません。従って、 選択子は既定値に左右されないように書くべきです >>4。

[97] WebVTT ではWebVTT中間節点オブジェクトについて、 v と lang は特定の属性だけが存在しているように、それ以外は属性が存在しないように扱うことになっています。 >>98

属性選択子の種類

[7] 属性選択子には次の種類があります >>4。

• [attr]
• [attr=value]
• [attr~=value]
• [attr|=value]
• [attr^=value]
• [attr*=value]
• [attr$=value]

[tokens~="hoge"]

<foo tokens="hoge  fuga abc  "/>

[tokens~="hoge  fuga"]

[tokens~=""]

[lang|=ja]

<foo lang="ja"/>

<foo lang="ja-JP"/>

構文

[19] 属性名は CSS修飾名です。 >>4

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

[74] 属性値は数字からはじまると識別子ではなく数とみなされてしまうので、 非妥当になります。

大文字と小文字

妥当性

[25] 宣言されていない名前空間接頭辞を使った属性選択子は非妥当です。 >>4

変種

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

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

歴史

実装

[40] IE7 以下は属性選択子に対応していなかったため、Webサイトでは長らく属性選択子は使えませんでした。

関連

[28] クラス選択子、ID選択子、:lang のような特定用途に特化した属性選択子と言えるような選択子もあります。

[31] 型選択子には普遍選択子がありますが、 属性選択子にはそれに相当するものがありません。

[96] [whatwg] [Selectors4] case-insensitive attribute value matching (in XML) (2012-06-06 09:05:01 +09:00 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-June/036284.html

[101] IRC logs: freenode / #whatwg / 20121202 ( (2012-12-12 09:05:40 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20121202

[102] Introduction to CSSOM (1) - DOM ECMAScripting ( (2012-02-18 20:10:11 +09:00 版)) http://domes.lingua.heliohost.org/dom/intro-cssom1.html#note-21

[103] Bug 24005 – Attribute values can't always be matched case-sensitively ( (2014-02-10 22:40:09 +09:00 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=24005

[104] Web Applications 1.0 r8253 Match reality better in terms of selector case-sensitivity ( (2013-11-07 04:38:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=8252&to=8253

[110] Web Applications 1.0 r8764 Try to clarify case matching rules for selectors ( (2014-09-13 02:48:00 +09:00 版)) http://html5.org/r/8764

[86] [selectors4] Spec for attribute value case-sensitivity is clearly to vague (Boris Zbarsky 著, 2016-01-22 13:34:57 +09:00 版) https://lists.w3.org/Archives/Public/www-style/2016Jan/0166.html

[87] Point out case-insensitivity of i in [foo=bar i] · w3c/csswg-drafts@498c104 (2016-01-23 12:37:45 +09:00 版) https://github.com/w3c/csswg-drafts/commit/498c1042562fd7cb98065351c63b2620c3ddc7bf

[88] Gloss the term "attribute selector" · whatwg/html@953b6f4 (2016-03-01 11:45:07 +09:00 版) https://github.com/whatwg/html/commit/953b6f41dd1563a512195044d54b3c661293d2b6

[89] [selectors] Remove the Selectors-specific tokens, rephrase in terms o… (tabatkins著, 2016-12-16 07:16:49 +09:00) https://github.com/w3c/csswg-drafts/commit/52554f80bac1d05be0067fff4a05d2ec126cb41f

[111] Remove the Selectors-specific tokens, per WG resolution. (tabatkins著, 2016-12-16 07:14:21 +09:00) https://github.com/w3c/csswg-drafts/commit/177fc30c38029740a4dfdc4721fc3aa4a8273595

[112] Selectors: attr name in any NS on HTML elements are case-insensitive (SimonSapin著, 2017-06-05 14:29:46 +09:00) https://github.com/whatwg/html/commit/822a91149c86f64ea86aaeb9f48d28ca75aa29ac

[113] SVG should specify what CSS attribute selectors and class selectors match on · Issue #328 · w3c/svgwg (2017-07-02 16:37:58 +09:00) https://github.com/w3c/svgwg/issues/328