Selectors 3

選択子 (仕様)

[2] 選択子 (せんたくし) (Selectors) (セレクター) は、 CSS文書木モデルにおける処理対象を選択するための、 あるいはその仕様です。

より正確に言えば、 W3C 選択子 (Selectors) 仕様によって選択子言語の構文と、 選択子および要素から一致か否かを決定する方法が規定されています。

[3] 選択子は、元々 CSS特性の指定対象を記述するために設計されましたが、 現在では CSS 以外でも使われています。そのため、 CSS 3選択子仕様は、 CSS 3モジュールかつ単独の仕様とみなされています。

[50] 近年では多くの JavaScriptフレームワークquerySelectorAll やそれに類するものが実装されています。

目次

  1. 仕様書
  2. 構文
    1. 単純選択子
    2. 結合子
    3. 大文字と小文字
      1. 歴史
    4. Escape
    5. メモ
  3. 名前空間接頭辞
  4. 妥当性
  5. 選択子を使う仕様
  6. 拡張
  7. 派生
  8. 利用者エージェント適合性
  9. 歴史
    1. CSS1
    2. CSS2
    3. STTS
    4. 選択子3
      1. プロファイル
      2. 選択子3からの削除
  10. テスト・ケース
  11. 関連
  12. メモ

仕様書#

構文#

[6]

選択子の群
読点で区切った選択子並びです。 読点またはの意味で、いずれかと一致すれば全体が一致と考えられます。
element1, element2, element3
  /* 要素型が element1, element2, element3 のいずれかなら一致 */
選択子
結合子で区切った単純選択子列並びです。 結合子は各単純選択子列一致する要素の位置関係を表します。
element1 > element2
  /* element1 要素の子供の element2 要素と一致 */
単純選択子列
区切子なしで綴られた単純選択子並びです。 先頭の単純選択子 (だけ) は、型選択子または全称選択子とします。 2つ目以降の単純選択子は、その他の種類で幾つでも指定できます。 すべての条件に一致するものが単純選択子列全体と一致します。
element1.class1:active
  /* 要素型が element1 で、クラス class1 に属し、活性状態の要素と一致 */
単純選択子
型選択子全称選択子属性選択子クラス選択子識別子選択子擬似クラスがあります。また、 単純選択子列の最後に限り、擬似要素を指定できます。
@規則
選択子ではありませんが、@規則によっては、 @鍵語選択子と同じような形で使われることがあります。 特に @page では頁選択子と呼ばれています。

CSS 1CSS 2 では、用語が異なっており、 ここに挙げた語が別の意味で使われていることがあります。 詳しくはそれぞれの項をご覧下さい。

単純選択子#

[1]

詳しくは単純選択子の項を参照。

結合子#

[2]

詳しくは結合子の項を参照。

大文字と小文字#

[9] 選択子では大文字小文字は原則として区別されませんが、 要素名などは当該マーク付け言語の解釈に依存します。

[10] 例えば次の例を考えましょう。

hoge|abbr[fuga|title="Cascading Style Sheets"].class#id:hover::after

[153] 詳しくは型選択子属性選択子CSS名前空間クラス選択子ID選択子の項を参照してください。

歴史#

[83] 名前空間接頭辞大文字小文字について、以前は選択子の利用場面によって大文字小文字を無視するかが定められるとされており、 CSS では無視、XBL選択子API では区別するとされていました。しかし実装が複雑になるため、 現在では一律で区別しないこととされています。

Escape#

[88] CSS と同じ方式の escape を使うことができます >>66 4.

メモ#

[91] 選択子仕様書には Yacc/Flex 形式の文法の定義がありますが、仕様書本文の規定よりはだいぶ緩くなっていて、 また非妥当選択子の処理が文法には記述できないため、これをそのまま実装しても仕様には適合しませんし、 この文法に適合するからといって正しい選択子であるとは限りません。

名前空間接頭辞#

[89] 型選択子普遍選択子属性選択子では名前空間接頭辞既定名前空間を使えます。 名前空間接頭辞宣言されていなければなりません。宣言の方法は選択子を使う場面によります >>66 4.CSS では @namespace @規則を使います。 XBL2 では xmlns 属性を使います。

妥当性#

[103] 構文解析誤り (parsing error) 、例えば認識できない字句や文脈上認められていない字句の出現などがあると、 選択子非妥当 (invalid) となります。 >>66 12.

[104] 利用者エージェントは次の構文解析誤りを正しく処理しなければなりません>>66 12.

[108] 選択子を再利用する仕様書は構文解析誤りの扱いを定義しなければなりません>>66 12.

[109] CSS では非妥当選択子を使っている規則無視されます。

選択子を使う仕様#

[8]

CSS
CSS特性の適用対象を指定するために選択子を使っています。
STTS
STTS は変換対象や処理内容を記述するために選択子を使っています。
XBL 2.0
XBL 2.0 では束縛対象や影木内容の記述のために選択子を使っています。
選択子API
選択子API は、節点を選択するために選択子を使うことができる DOMメソッド群です。
HTML5
HTML5 勧告案にかつて含まれていたデータ雛形機能は要素の選択に選択子を使っていましたが、 この機能自体が削除されました。

[101] 選択子を再利用する仕様は、利用を認める、または認めない部分集合を列挙し、 仕様に追加する制約を説明するプロファイルを含めなければなりません>>66 12.

[102] この規定は各仕様の定義は直交するべきという現在の考え方にはそぐわない気がしますね。 実際そんなプロファイルなんて定義している仕様書は無いような。

拡張#

[51] 選択子は、採用する仕様や実装によって独自に拡張されていることがあります。

派生#

[164] Emmet

利用者エージェント適合性#

[100] 装置の制限によって選択子の一部を実装できないとしても、それによってただちに不適合となるものではありません。 例えば対話的利用者エージェント以外では動的擬似クラスは意味が無いので実装しなくて構いません。 >>66 12.

歴史#

CSS1#

[116] 選択子CSS の最も重要で本質的な構成要素の一つであり、当然ながら既に CSS1 でいろいろな機能が含まれていました。

[117] CSS1HTML 専用のスタイル言語でした。

CSS2#

[118] CSS2XML に対応しました。

[119] 属性選択子普遍選択子など多くの機能が CSS2 で追加されています。

[131] CSS2 では単純選択子の個数の制約が撤廃されています。

STTS#

[99] STTS選択子を独自に拡張していました。そのうちのいくつかは選択子3仕様に取り込まれています。

選択子3#

[65] >>64 は現時点では (選択子4WDが既に出ていますが) >>63 を指しています。

[115] CSS3 世代から、選択子CSS の一部でありながらも単独の仕様でもあるという扱いになりました。

[120] 選択子3では擬似クラスが多く追加されたり、用語が整理されたりしています。

[110] 選択子3以降擬似要素: からはじまるものから :: からはじまるものに変更されています。詳しくは擬似要素の項を参照してください。

プロファイル#

[92] 選択子3では幾つかのプロファイルが定義されています。それぞれ、選択子3を過去の仕様で規定されていた範囲に限定したものとなっています。

[93] 今となってはほとんど意味はありませんが、昔は CSSプロファイルを定義することが重要と考えていた人達もいましたw
[98] STTS3 プロファイル選択子3のうちSTTS3に相当する機能を含んだものですが、 STTS3 には選択子3に含まれていない機能もあり、それはこのプロファイルに含まれていません。
[97] なぜか選択子3全体というプロファイルはありません。

選択子3からの削除#

[132] 次の機能は選択子3の初期の案に含まれていましたが、実装経験の不足などの理由で最終版には含まれていません。

テスト・ケース#

関連#

[111] 選択子はしばしば XPath と対比されます。 XPath はかなり強力な式言語であり、 選択子よりも細かく一致する要素を指定できます。また要素以外のものを一致させたり、 文字列数値の演算を行ったりもできます。

[112] しかし XPath擬似クラス擬似要素に相当するものがありません。また選択子とは違って CSSHTML に動的に適用するような用途も考慮していないので、仮に CSS のようなものを実装しようとすると性能上選択子の方がずっと有利でしょう。

メモ#

[12] hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ http://hxxk.jp/2006/10/20/0357 (名無しさん 2006-10-20 15:32:01 +00:00)

[13] Playing with CSS selectors http://www.maujor.com/tutorial/isel-en.php (名無しさん 2006-11-16 00:08:26 +00:00)

[14] Prototype JavaScript framework: Utility Methods.$$ (2007-03-10 12:39:19 +09:00 版) http://prototypejs.org/api/utility/dollar-dollar (名無しさん 2007-03-11 01:09:56 +00:00)

[29] IE7 の隣接セレクタで気が付いたこと | WWW WATCH (2007-04-21 11:56:35 +09:00 版) http://hyper-text.org/archives/2007/04/ie7_adjacent_sibling_combinator.shtml (名無しさん 2007-04-21 03:08:29 +00:00)

[30] WEBTECH - webtech:vantguarde (2007-04-21 11:56:37 +09:00 版) http://web.g.hatena.ne.jp/vantguarde/20070421#1177098311 (名無しさん 2007-04-21 03:09:02 +00:00)

[31] >>29-30

これも IE8 の真標準モードでは修正するけど新奇癖モード (旧標準モード) では修正しないとかいいだすのか?? (名無しさん 2007-04-21 03:10:33 +00:00)

[32] Shishimushi - Wii Opera のCSSセレクタ対応状況 (2007-04-23 09:04:06 +09:00 版) http://kawatarou.info/note/opera/wii_opera_css_selectors.htm (名無しさん 2007-04-23 00:07:17 +00:00)

[33] Lucky bag::blog: こんなセレクタが CSS にあれば便利なのにと思うセレクタ (e-luck 著, 2007-04-23 09:20:35 +09:00 版) http://www.lucky-bag.com/archives/2007/04/thinking-about-content-pseudo-class.html

FAQ 嫁だな。 (名無しさん 2007-04-23 00:24:02 +00:00)

[34] SlickSpeed Selectors Test (2007-06-24 17:16:08 +09:00 版) http://mootools.net/slickspeed/ (名無しさん 2007-06-24 09:48:18 +00:00)

[36] あったらいいのに CSS セレクタ | WWW WATCH (2007-07-13 22:32:58 +09:00 版) http://hyper-text.org/archives/2007/07/delusion_css_electors.shtml (名無しさん)

[37] Taken SPC : Web 標準の日々 (2007-07-22 14:56:32 +09:00 版) http://taken.s101.xrea.com/blog/article.php?id=772 (名無しさん)

[38] Bug 75375 – support for :nth-*() pseudo-classes (2007-07-22 14:56:46 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=75375 (名無しさん)

[39] Bug 65133 – implement CSS3 selectors (2007-07-22 14:56:47 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=65133 (名無しさん)

[40] seamonkey mozilla/layout/style/nsCSSRuleProcessor.cpp (2007-07-13 05:10:23 +09:00 版) http://mxr.mozilla.org/seamonkey/source/layout/style/nsCSSRuleProcessor.cpp (名無しさん)

[41] Latest topics > selector.js改 - outsider reflex (Piro(SHIMODA Hiroshi) 著, 2007-08-04 11:26:26 +09:00 版) http://piro.sakura.ne.jp/latest/blosxom/webtech/javascript/2007-07-31_selectorjs.htm (名無しさん 2007-08-04 02:29:16 +00:00)

[42] Dust-Me Selectors (2007-08-04 12:09:02 +09:00 版) http://www.sitepoint.com/dustmeselectors/ (名無しさん)

[43] http://suika.fam.cx/gate/2007/cssom/viewer?c=a%20%2F**%2F%20%2B%20b%20%7B%7D%0A;h=;p=n;x=style-element

これは選択子仕様書の文法的には認められないような。。。

(名無しさん)

[44] Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex (Piro(SHIMODA Hiroshi) 著, 2007-09-13 21:17:21 +09:00 版) http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm (名無しさん)

[45] rikkertkoppes.com ✤ thoughts - css syntax in graph (2007-10-23 20:26:41 +09:00 版) http://www.rikkertkoppes.com/thoughts/css-syntax/ (名無しさん)

[46] Selectors (2006-10-11 08:57:04 +09:00 版) http://damowmow.com/temp/csswg/selectors/Overview.html (名無しさん)

[47] Selectors (2008-06-28 08:01:06 +09:00 版) http://dev.w3.org/cvsweb/~checkout~/csswg/selectors3/Overview.html?content-type=text/html;%20charset=utf-8

[48] CSSセレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - uupaaの開発日記 ( 版) http://d.hatena.ne.jp/uupaa/20090116/1232093381

[49] ブラウザがネイティブに実装しているCSSセレクタ(querySelectorAll)で良くわからないところ - latest log ( 版) http://d.hatena.ne.jp/uupaa/20090209/1234168098

[52] Bug 65133 – implement CSS3 selectors ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=65133

[53] Selectors Level 3 ( 版) http://www.w3.org/TR/2009/WD-css3-selectors-20090310/

[54] Selectors Level 3 ( 版) http://www.w3.org/TR/2009/PR-css3-selectors-20091215/

[55] IRC logs: freenode / #whatwg / 20101029 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20101029#l-788

[56] Selectors Level 4 [CSS Working Group Wiki] ( ( 版)) http://wiki.csswg.org/spec/selectors4

[57] IRC logs: freenode / #whatwg / 20110616 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110616

[58] Selectors Level 4 ( ( 版)) http://www.w3.org/TR/2011/WD-selectors4-20110929/

[59] http://www.w3.org/TR/selectors/ は現時点で Selectors3 勧告を指しています。

[60] Selectors Level 3 ( ( 版)) http://www.w3.org/TR/2011/REC-css3-selectors-20110929/

[61] Errata in REC-css3-selectors-20110929 ( ( 版)) http://www.w3.org/Style/2011/REC-css3-selectors-20110929-errata.html

[133] Selectors3CSS2 から切り出してきた時に構文とかの規定が完全には移植されずに曖昧な感じになってます。 YACC/Flex 文法は載っているんだけど、注釈とか <!-- とかの semantics が明記されていないとか。

[134] IRC logs: freenode / #whatwg / 20111029 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20111029

[135] 選択子仕様書は大文字小文字の区別や擬似クラスの意味をマーク付け言語に委ねていますが、 実際にそれを定義しているのは HTML 仕様書くらいです。 XFormsXLink の仕様書にも若干言及がありますが規定でなく参考で、また不完全です。 XML についての規定は XML 系の仕様書に本来あるべきでしょうが、実際には HTML の仕様書の規定に含まれています。

[136] SMIL Timesheets 1.0 ( ( 版)) http://www.w3.org/TR/2012/NOTE-timesheets-20120328/#adef-timesheetsSelect

[137] SMIL Timesheets 1.0 ( ( 版)) http://www.w3.org/TR/2012/NOTE-timesheets-20120328/#smilTimesheetsNS-Elements-Item-Functions-Index

[138] CSS Selectors as Fragment Identifiers Community Group ( ( 版)) http://www.w3.org/community/cssselfrags/

[139] [selectors3] WIP: a selector parser based on css3-syntax ( (Simon Sapin 著, 版)) http://lists.w3.org/Archives/Public/www-style/2012Jun/0159.html

[140] Selectors Level 4 ( ( 版)) http://www.w3.org/TR/2012/WD-selectors4-20120823/

[141] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#attributes-containing-selectors

[142] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#allow-selectors-through

[143] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#selectors-and-shadow-scopes

[144] CSS Print Profile ( ( 版)) http://www.w3.org/TR/2013/NOTE-css-print-20130314/#section-selectors

[145] Selectors Level 4 ( ( 版)) http://www.w3.org/TR/2013/WD-selectors4-20130502/

[146] Making selectors first-class citizens ( (Anne van Kesteren 著, 版)) http://lists.w3.org/Archives/Public/www-style/2013Sep/0194.html

[147] IRC logs: freenode / #whatwg / 20131029 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20131029#l-699

[148] Bug 23781 – id and class should be case-insensitive in quirks ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=23781

[149] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#attributes

[150] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#selectors

[151] [selectors-nonelement] First draft of a new spec for selecting non-element nodes ( (Jirka Kosek 著, 版)) http://lists.w3.org/Archives/Public/www-style/2014Feb/0464.html

[152] Non-element Selectors ( ( 版)) http://dev.w3.org/csswg/selectors-nonelement/

[154] Surfin' Safari - Blog Archive » Little overview of WebKit’s CSS JIT Compiler ( ( 版)) https://www.webkit.org/blog/3271/webkit-css-selector-jit-compiler/

[155] IRC logs: freenode / #whatwg / 20140422 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140422

[156] Internationalization Tag Set (ITS) Version 2.0 ( ( 版)) http://www.w3.org/TR/its20/#def-css-selector

[157] Internationalization Tag Set (ITS) Version 2.0 ( ( 版)) http://www.w3.org/TR/its20/#css-selectors

[5] [selectors-4] bikeshed on profiles (Brian Kardell 著, 版) https://lists.w3.org/Archives/Public/www-style/2015Apr/0070.html

[7] DOM Event I/O Processor for SCXML ( ( 版)) http://www.w3.org/TR/2015/NOTE-dom-iop-20150806/

[11] Pointer Methods in RDF 1.0 () https://www.w3.org/TR/2017/NOTE-Pointers-in-RDF10-20170202/

2.3.1.2 CSSSelectorPointer Class

CSS Selector Pointer - an expression pointer that points out parts of a document by means of a CSS expression.

[15] Web Annotation Data Model () https://w3c.github.io/web-annotation/model/wd2/#h-css-selector

CSS Selectors allow for a wide variety of well supported ways to describe the path to an element in a web page, and thus cover many of the basic use cases for Web Annotation. Results are not defined for when a CSS Selector is applied to a representation that does not conform to the Document Object Model.

[16] 「DOM に適合しない表現」とは意味がよくわかりませんが、 WebブラウザーDOM で表されないMIME型、というようなことなのでしょうか。 媒体文書プラグイン文書がどう扱われるのかよくわかりませんし、 結果は未定義と書いてあるので、どこまでが正しい動作なのか検証するのも難しそうですね。 (相互運用性とは (哲学))

[17] 後の方に表があって、そこでは HTMLXMLSVG選択子 (や XPath 1.0) が該当することになっています。テキスト文書すら該当しないようです。 しかし EPUB も該当しないことになっています。「DOM に適合」 の意味はかなり難解なようです。

[18] Web Annotation Vocabulary () https://w3c.github.io/web-annotation/vocab/wd/#h-cssselector

[19] Selectors and States () https://w3c.github.io/web-annotation/selector-note/#h-cssselector_def

Instance

An element of a group of Resources represented by a particular Class.

[20] Non-element Selectors Module Level 1 () https://drafts.csswg.org/selectors-nonelement/

[21] Errata in REC-css3-selectors-20110929 () https://www.w3.org/Style/2011/REC-css3-selectors-20110929-errata.html

[22] Creating Safari Content-Blocking Rules () https://developer.apple.com/library/content/documentation/Extensions/Conceptual/ContentBlockingRules/CreatingRules/CreatingRules.html#//apple_ref/doc/uid/TP40016265-CH2-SW1

selector

A string that defines a selector list. This value is required when the action type is css-display-none. If the action type is not css-display-none, the selector field is ignored. Use CSS identifiers as the individual selector values, separated by commas. All selectors that are supported by Safari and WebKit are supported by Safari content-blocking rules. Compound selectors, shown in Listing 3 and defined in the W3C Selectors Level 4 draft, are also supported.

[23] [selectors] Rewrite selector matching algorithms to describe matching… (dbaron著, ) https://github.com/w3c/csswg-drafts/commit/7dc262a4832f3285a9280618ea7f669392299ce6

[24] selectors4 API hooks section (was Re: Proposed agenda) (L. David Baron著, ) https://lists.w3.org/Archives/Public/www-style/2017Jul/0022.html

[25] [selectors-4] Rename “dynamic” profile to “live” and “static” to “sna… (fantasai著, ) https://github.com/w3c/csswg-drafts/commit/fa1389534b5d07c5426f5bc44745d409952a5a02

[26] More intuitive names for selector performance profiles · Issue #1694 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/1694

[27] [CSSWG][selectors-4] Updated WD of Selectors Level 4 (fantasai著, ) https://lists.w3.org/Archives/Public/www-style/2018Feb/0001.html

[28] Selectors Level 4 () https://www.w3.org/TR/2018/WD-selectors-4-20180202/

[90] Do not throw for query() and queryAll() · Issue #39 · whatwg/dom () https://github.com/whatwg/dom/issues/39

[158] Selectors Level 3 () https://www.w3.org/TR/2018/CR-selectors-3-20180130/

[159] [selectors-4] Rename “dynamic” profile to “live” and “static” to “sna… (fantasai著, ) https://github.com/w3c/csswg-drafts/commit/fa1389534b5d07c5426f5bc44745d409952a5a02

[160] [selectors] More intuitive names for selector performance profiles · Issue #1694 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/1694

[161] [CSSWG][selectors-4] Updated WD of Selectors Level 4 (fantasai著, ) https://lists.w3.org/Archives/Public/www-style/2018Feb/0001.html

[162] Selectors Level 4 () https://www.w3.org/TR/2018/WD-selectors-4-20180202/