[2] 選択子 (セレクター) は、 CSS の文書木モデルにおける処理対象を選択するための式、 あるいはその仕様です。
[3] 選択子は、元々 CSS で特性の指定対象を記述するために設計されましたが、 現在では CSS 以外でも使われています。そのため、 CSS 3 の選択子仕様は、 CSS 3 のモジュールかつ単独の仕様とみなされています。
[50] 近年では多くの JavaScriptフレームワークで querySelectorAll
やそれに類するものが実装されています。
またはの意味で、いずれかと一致すれば全体が一致と考えられます。
element1, element2, element3 /* 要素型が element1, element2, element3 のいずれかなら一致 */
element1 > element2 /* element1 要素の子供の element2 要素と一致 */
element1.class1:active /* 要素型が element1 で、クラス class1 に属し、活性状態の要素と一致 */
@page
では頁選択子と呼ばれています。詳しくは単純選択子の項を参照。
S T
:
単純選択子 S
と一致する要素の子孫の、
単純選択子 T
と一致する要素と一致S > T
:
単純選択子 S
と一致する要素の子供の、
単純選択子 T
と一致する要素と一致S + T
:
単純選択子 S
と一致する要素の直接隣接する弟の、
単純選択子 T
と一致する要素と一致S ~ T
:
単純選択子 S
と一致する要素の弟の、
単純選択子 T
と一致する要素と一致詳しくは結合子の項を参照。
[9] 選択子では大文字と小文字は原則として区別されませんが、 要素名などは当該マーク付け言語の解釈に依存します。
[10] 例えば次の例を考えましょう。
hoge|abbr[fuga|title="Cascading Style Sheets"].class#id:hover::after
abbr
は使用するマーク付け言語で要素名の大文字と小文字を区別するかに依存します。title
は使用するマーク付け言語で属性名の大文字と小文字を区別するかに依存します。Cascading Style Sheets
は使用するマーク付け言語で属性値の大文字と小文字を区別するかに依存します。class
の部分は、使用するマーク付け言語でクラス名の大文字と小文字を区別するかに依存します。id
の部分は、使用するマーク付け言語で識別子の大文字と小文字を区別するかに依存します。hover
と after
は、大文字でも小文字でも構いません。hoge
や fuga
のような名前空間接頭辞は大文字と小文字を区別します。[83] 名前空間接頭辞の大文字と小文字について、以前は選択子の利用場面によって大文字と小文字を無視するかが定められるとされており、 CSS では無視、XBL と選択子API では区別するとされていました。しかし実装が複雑になるため、 現在では一律で区別しないこととされています。
2007-06-20 02:11:27 +09:00
版) http://lists.w3.org/Archives/Public/www-style/2007Jun/0097.html
(名無しさん 2007-06-24 10:09:52 +00:00)[91] 選択子仕様書には Yacc/Flex 形式の文法の定義がありますが、仕様書本文の規定よりはだいぶ緩くなっていて、 また非妥当な選択子の処理が文法には記述できないため、これをそのまま実装しても仕様には適合しませんし、 この文法に適合するからといって正しい選択子であるとは限りません。
[89] 型選択子、普遍選択子、属性選択子では名前空間接頭辞や既定名前空間を使えます。
名前空間接頭辞は宣言されていなければなりません。宣言の方法は選択子を使う場面によります
>>66 4.。 CSS では @namespace
@規則を使います。 XBL2
では xmlns
属性を使います。
[103] 構文解析誤り、例えば認識できない字句や文脈上認められていない字句の出現などがあると、 選択子は非妥当となります。 >>66 12.
[104] 利用者エージェントは次の構文解析誤りを正しく処理しなければなりません。 >>66 12.
[101] 選択子を再利用する仕様は、利用を認める、または認めない部分集合を列挙し、 仕様に追加する制約を説明するプロファイルを含めなければなりません。 >>66 12.
[100] 装置の制限によって選択子の一部を実装できないとしても、それによってただちに不適合となるものではありません。 例えば対話的利用者エージェント以外では動的擬似クラスは意味が無いので実装しなくて構いません。 >>66 12.
[116] 選択子は CSS の最も重要で本質的な構成要素の一つであり、当然ながら既に CSS1 でいろいろな機能が含まれていました。
[115] CSS3 世代から、選択子は CSS の一部でありながらも単独の仕様でもあるという扱いになりました。
[120] 選択子3では擬似クラスが多く追加されたり、用語が整理されたりしています。
[110] 選択子3以降擬似要素は :
からはじまるものから
::
からはじまるものに変更されています。詳しくは擬似要素の項を参照してください。
[92] 選択子3では幾つかのプロファイルが定義されています。それぞれ、選択子3を過去の仕様で規定されていた範囲に限定したものとなっています。
[111] 選択子はしばしば XPath と対比されます。 XPath はかなり強力な式言語であり、 選択子よりも細かく一致する要素を指定できます。また要素以外のものを一致させたり、 文字列や数値の演算を行ったりもできます。
[112] しかし XPath は擬似クラスや擬似要素に相当するものがありません。また選択子とは違って CSS を HTML に動的に適用するような用途も考慮していないので、仮に 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)
これも 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] Selectors3、CSS2 から切り出してきた時に構文とかの規定が完全には移植されずに曖昧な感じになってます。 YACC/Flex 文法は載っているんだけど、注釈とか <!-- とかの semantics が明記されていないとか。
[134] IRC logs: freenode / #whatwg / 20111029 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20111029
[135] 選択子仕様書は大文字と小文字の区別や擬似クラスの意味をマーク付け言語に委ねていますが、 実際にそれを定義しているのは HTML 仕様書くらいです。 XForms と XLink の仕様書にも若干言及がありますが規定でなく参考で、また不完全です。 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/
[16] 「DOM に適合しない表現」とは意味がよくわかりませんが、 Webブラウザーで DOM で表されないMIME型、というようなことなのでしょうか。 媒体文書やプラグイン文書がどう扱われるのかよくわかりませんし、 結果は未定義と書いてあるので、どこまでが正しい動作なのか検証するのも難しそうですね。 (相互運用性とは (哲学))
[17] 後の方に表があって、そこでは HTML と XML と SVG は選択子 (や XPath 1.0) が該当することになっています。テキスト文書すら該当しないようです。 しかし EPUB も該当しないことになっています。「DOM に適合」 の意味はかなり難解なようです。
[18] Web Annotation Vocabulary () https://w3c.github.io/web-annotation/vocab/wd/#h-cssselector
[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
[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/