* W3C 選択子 [2] [DFN[[RUBY[選択子] [せんたくし] @en[Selectors]]]]は、 [[CSS]] の[[文書木]]モデルにおける処理対象を選択するための[[式]]、 あるいはその仕様です。 ;; より正確に言えば、 [[W3C]] [RUBYB[[[選択子]]] @en[Selectors]]仕様によって[[選択子]]言語の[[構文]]と、 [[選択子]][[式]]および[[要素]]から[Q[[[一致]]か否か]]を決定する方法が規定されています。 [3] [[選択子]]は、元々 [[CSS]] で[[特性]]の指定対象を記述するために設計されましたが、 現在では [[CSS]] 以外でも使われています。そのため、 [[CSS 3]] の[[選択子]]仕様は、 [[CSS 3]] の[[モジュール]]かつ単独の仕様とみなされています。 [50] 近年では多くの [[JavaScriptフレームワーク]]で [CODE(DOMm)@en[[[querySelectorAll]]]] やそれに類するものが実装されています。 * 仕様書 [4] - [CSS1] [DEL[[CITE@en[Cascading Style Sheets, level 1]] ]] - [CSS2] [CITE@en[Selectors]] - [Selectors] [CITE@en[Selectors]] - [XForms] [CSECTION@en[F XForms and Styling (Non-Normative)]] -- * 構文 [6] :[DFN[[[選択子の群]]]]:[[読点]]で区切った[[選択子]]の[[並び]]です。 [[読点]]は[Q[または]]の意味で、いずれかと[[一致]]すれば全体が[[一致]]と考えられます。 [PRE(CSS example)[ element1, element2, element3 /* 要素型が element1, element2, element3 のいずれかなら一致 */ ]PRE] :[DFN[[[選択子]]]]:[[結合子]]で区切った[[単純選択子列]]の[[並び]]です。 [[結合子]]は各[[単純選択子列]]と[[一致]]する[[要素]]の位置関係を表します。 [PRE(CSS example)[ element1 > element2 /* element1 要素の子供の element2 要素と一致 */ ]PRE] :[DFN[[[単純選択子列]]]]:[[区切子]]なしで綴られた[[単純選択子]]の[[並び]]です。 先頭の[[単純選択子]] (だけ) は、[[型選択子]]または[[全称選択子]]とします。 2つ目以降の[[単純選択子]]は、その他の種類で幾つでも指定できます。 すべての条件に[[一致]]するものが[[単純選択子列]]全体と[[一致]]します。 [PRE(CSS example)[ element1.class1:active /* 要素型が element1 で、クラス class1 に属し、活性状態の要素と一致 */ ]PRE] :[DFN[[[単純選択子]]]]: [[型選択子]]、[[全称選択子]]、[[属性選択子]]、[[クラス選択子]]、 [[識別子選択子]]、[[擬似クラス]]があります。また、 [[単純選択子列]]の最後に限り、[[擬似要素]]を指定できます。 :[DFN[[[@規則]]]]:[[選択子]]ではありませんが、[[@規則]]によっては、 [[@鍵語]]が[[選択子]]と同じような形で使われることがあります。 特に [CODE(CSS)@en[@[[page]]]] では[[頁選択子]]と呼ばれています。 ;; [[CSS 1]] や [[CSS 2]] では、用語が異なっており、 ここに挙げた語が別の意味で使われていることがあります。 詳しくはそれぞれの項をご覧下さい。 ** 単純選択子 [1] - [[型選択子]] -- [CODE(CSS)@en[[VAR[E]]]] ([CODE(CSS)@en[[VAR[E]]]] は[[要素型名]]): [[要素型名]] (文脈から得られる[[名前空間URI]] と[[局所名]]の組) で[[一致]]を判定します。 -- [CODE(CSS)@en[[VAR[P]]|[VAR[L]]]] ([CODE(CSS)@en[[VAR[P]]]] は[[名前空間接頭辞]]または [CODE(CSS)[[[*]]]]、 [CODE(CSS)@en[[VAR[L]]]] は[[局所名]]): [[要素型名]] ([CODE(CSS)@en[[VAR[P]]]] から得られる[[名前空間URI]] と[[局所名]]の組) で[[一致]]を判定します。 - [[全称選択子]] -- [CODE(CSS)@en[[[*]]]]: 文脈から得られる[[名前空間URI]] で[[一致]]を判定します。 -- [CODE(CSS)@en[[VAR[P]]|*]] ([CODE(CSS)@en[[VAR[P]]]] は[[名前空間接頭辞]]または [CODE(CSS)[[[*]]]]): [CODE(CSS)@en[[VAR[P]]]] から得られる[[名前空間URI]] で[[一致]]を判定します。 - [[属性選択子]] -- [[属性名]]を表す [CODE(CSS)@en[[VAR[N]]] の部分は、]] [[要素型名]]と同じように指定します。 -- [CODE(CSS)@en['''['''[VAR[N]]''']''']]: [[属性]]が[[存在]]すれば[[一致]]します。 -- [CODE(CSS)@en['''['''[VAR[N]] [VAR[op]] [VAR[V]]''']''']]: [[属性値]]が指定した値 (の一部) と等しければ[[一致]]します。 [CODE(CSS)@en[[VAR[op]]]] は、次の種類があります。 --- [CODE(CSS)[[[=]]]]: [[完全一致]] --- [CODE(CSS)[[[^=]]]]: [[前方一致]] --- [CODE(CSS)[[[$=]]]]: [[後方一致]] --- [CODE(CSS)[[[*=]]]]: 部分一致 --- [CODE(CSS)[[[~=]]]]: 間隔区切並び中の一項目と一致 --- [CODE(CSS)[[[|=]]]]: [CODE[-]] の手前までの前方一致 - [[クラス選択子]] -- [CODE(CSS)@en[.[VAR[C]]]] ([CODE(CSS)@en[[VAR[C]]]] は[[クラス]]の名前): [[クラス属性]]の間隔区切並び中の一項目と[[一致]] - [[識別子選択子]] -- [CODE(CSS)@en[#[VAR[ID]]]] ([CODE(CSS)@en[[VAR[ID]]]] は[[識別子]]の名前): [[識別子]]と[[一致]] - [[擬似クラス]] -- [CODE(CSS)@en[:[VAR[C]]]] または [CODE(CSS)@en[:[VAR[C]] ([VAR[A]])]] ([CODE(CSS)@en[[VAR[C]]]] は[[擬似クラス]]の[[名前]]、 [CODE(CSS)@en[[VAR[A]]]] は[[引数]]): [[擬似クラス]]の条件を満たせば[[一致]] - [[擬似要素]] -- [CODE(CSS)@en[::[VAR[E]]]] または [CODE(CSS)@en[:[VAR[E]] ([VAR[A]])]] ([CODE(CSS)@en[[VAR[E]]]] は[[擬似要素]]の[[名前]]、 [CODE(CSS)@en[[VAR[A]]]] は[[引数]]): 指定した名前の[[擬似要素]] -- [CODE(CSS)@en[:[VAR[E]]]] ([CODE(CSS)@en[[VAR[E]]]] は [[CSS 2]] までに導入された[[擬似要素]]の[[名前]]): 指定した名前の[[擬似要素]] 詳しくは[[単純選択子]]の項を参照。 ** 結合子 [2] - [CODE(CSS)@en[[VAR[S]] [VAR[T]]]]: [[単純選択子]] [CODE(CSS)@en[[VAR[S]]]] と[[一致]]する[[要素]]の''[[子孫]]''の、 [[単純選択子]] [CODE(CSS)@en[[VAR[T]]]] と[[一致]]する[[要素]]と[[一致]] - [CODE(CSS)@en[[VAR[S]] > [VAR[T]]]]: [[単純選択子]] [CODE(CSS)@en[[VAR[S]]]] と[[一致]]する[[要素]]の''[[子供]]''の、 [[単純選択子]] [CODE(CSS)@en[[VAR[T]]]] と[[一致]]する[[要素]]と[[一致]] - [CODE(CSS)@en[[VAR[S]] + [VAR[T]]]]: [[単純選択子]] [CODE(CSS)@en[[VAR[S]]]] と[[一致]]する[[要素]]の''直接隣接する[[弟]]''の、 [[単純選択子]] [CODE(CSS)@en[[VAR[T]]]] と[[一致]]する[[要素]]と[[一致]] - [CODE(CSS)@en[[VAR[S]] ~ [VAR[T]]]]: [[単純選択子]] [CODE(CSS)@en[[VAR[S]]]] と[[一致]]する[[要素]]の''[[弟]]''の、 [[単純選択子]] [CODE(CSS)@en[[VAR[T]]]] と[[一致]]する[[要素]]と[[一致]] 詳しくは[[結合子]]の項を参照。 ** SAC 選択子 API [5] [[SAC]] は[[選択子]]を構文とは直接対応しない形で扱います。 [[選択子]]の構文では記述できないものも表せます。 ;; [CITE@en[SAC: Simple API for CSS]] [7] - [[節点]] -- [[要素型節点]] ([[型選択子]]、[[全称選択子]]に相当) -- [[擬似要素型]] ([[擬似要素]]に相当) -- [[テキスト節点]] -- [[処理指令節点]] -- [[注釈節点]] -- [[根節点]] -- [[文字データ区間節点]] - [[節点]]の組合せ -- [CODE@en[[[SAC_CHILD_SELECTOR]]]] ([CODE(CSS)@en[[[>]]]] に相当) -- [CODE@en[[[SAC_DESCENDANT_SELECTOR]]]] ([[空白]][[結合子]]に相当) -- [CODE@en[[[SAC_DIRECT_ADJACENT_SELECTOR]]]] ([CODE(CSS)@en[[[+]]]] に相当) -- [CODE@en[[[SAC_INDIRECT_ADJACENT_SELECTOR]]]] ([CODE(CSS)@en[[[~]]]] に相当) -- [CODE@en[[[SAC_NEGATIVE_SELECTOR]]]] ([CODE(CSS)@en[:[[not]]]] に相当) - 条件 -- [CODE@en[[[SAC_ATTRIBUTE_CONDITION]]]] ([[属性選択子]] (存在) に相当) -- [CODE@en[[[SAC_BEGIN_HYPHEN_ATTRIBUTE_CONDITION]]]] ([[属性選択子]] ([CODE(CSS)[[[|=]]]]) に相当) -- [CODE@en[[[SAC_ONE_OF_ATTRIBUTE_CONDITION]]]] ([[属性選択子]] ([CODE(CSS)[[[~=]]]]) に相当) -- [CODE@en[[[SAC_CLASS_CONDITION]]]] ([[クラス選択子]]に相当) -- [CODE@en[[[SAC_ID_CONDITION]]]] ([[識別子選択子]]に相当) -- [CODE@en[[[SAC_LANG_CONDITION]]]] ([CODE(CSS)@en[:[[lang]]]] に相当) -- [CODE@en[[[SAC_POSITIONAL_CONDITION]]]] (位置に関する[[擬似クラス]]に相当) [[#comment]] ** 大文字と小文字 [9] [[選択子]]内の[[大文字]]と[[小文字]]は、区別され''ません''。 ただし、[[要素型]]と[[属性]]の[[局所名]]と[[属性値]]は、 適用対象となる[[文書]]の[[マーク付け言語]]の規定に依存します。 [10] [PRE(CSS example code)[ abbr[title="Cascading Style Sheets"].class#id:hover::after ]PRE] - [CODE(CSS)@en[hover]] と [CODE(CSS)@en[after]] は、 [[大文字]]でも[[小文字]]でも変わりありません。 - [CODE(CSS)@en[abbr]] と [CODE(CSS)@en[title]] の部分は、 使用する[[マーク付け言語]]で[[局所名]]の[[大文字]]と[[小文字]]を区別するかに依存します。 従来の [[HTML]] では区別され''ず''、 [[XML]] では区別され''ます''。 - [CODE(CSS)@en[Cascading Style Sheets]] の部分は、 使用する[[マーク付け言語]]と[[要素型]]および[[属性]]によって[[大文字]]と[[小文字]]が区別されたりされなかったりします。 この例の場合は ([[HTML]] とすると) 区別されます。 - [CODE(CSS)@en[class]] の部分は、 使用する[[マーク付け言語]]によって[[大文字]]と[[小文字]]が区別されたりされなかったりします。 [[HTML]] の[[互換モード]]では区別され''ず''、 [[HTML]] の[[標準モード]]および [[SVG]]、 [[MathML]] では区別され''ます''。 - [CODE(CSS)@en[id]] の部分は、 使用する[[マーク付け言語]]によって[[大文字]]と[[小文字]]が区別されたりされなかったりします。 [[XML]] では区別され''ます''。 - [11] [[名前空間接頭辞]]で[[大文字]]と[[小文字]]を区別するかは、[[選択子]]を使用する文脈によって変化します。 [[CSS]] では区別しま''せん''。[[選択子API]] や [[XBL]] では区別し''ます''。 -- [35] [CITE@en[Re: '''['''css3-selectors''']''' Namespace name lookup mechanisms]] ([[fantasai]] 著, [CODE[2007-06-20 02:11:27 +09:00]] 版) ([[名無しさん]] [WEAK[2007-06-24 10:09:52 +00:00]]) [[#comment]] * 選択子を使う仕様 [8] :[[CSS]]:[[CSS]] は[[特性]]の適用対象を指定するために[[選択子]]を使っています。 :[[STTS]]:[[STTS]] は変換対象や処理内容を記述するために[[選択子]]を使っています。 :[[XBL 2.0]]:[[XBL 2.0]] では[[束縛]]対象や[[影木]]の[[内容]]の記述のために[[選択子]]を使っています。 :[[選択子API]]:[[選択子API]] は、[[節点]]を選択するために[[選択子]]を使うことができる [[DOM]] の[[メソッド]]群です。 :[[HTML5]]:[[HTML5]] 勧告案にかつて含まれていた[[データ雛形]]機能は[[要素]]の選択に[[選択子]]を使っていましたが、 この機能自体が削除されました。 * 拡張 [51] [[選択子]]は、採用する仕様や実装によって独自に拡張されていることがあります。 - [[STTS]] の拡張については、 [[STTS]] の項を参照してください。 - [[擬似クラス]]や[[擬似要素]]の拡張については、それぞれの項を参照してください。 - [[JavaScriptフレームワーク]]の[[選択子]]の実装は独自の拡張や制限が含まれていることがよくあります。 * メモ [12] [CITE[hxxk.jp - IE 7 正式版を含む各種ブラウザの CSS Selectors testsuite の検証結果のまとめ]] ([[名無しさん]] [WEAK[2006-10-20 15:32:01 +00:00]]) [13] [CITE[Playing with CSS selectors]] ([[名無しさん]] [WEAK[2006-11-16 00:08:26 +00:00]]) [14] [CITE@en[Prototype JavaScript framework: Utility Methods.$$]] ([CODE[2007-03-10 12:39:19 +09:00]] 版) ([[名無しさん]] [WEAK[2007-03-11 01:09:56 +00:00]]) [29] [CITE@ja[IE7 の隣接セレクタで気が付いたこと | WWW WATCH]] ([CODE[2007-04-21 11:56:35 +09:00]] 版) ([[名無しさん]] [WEAK[2007-04-21 03:08:29 +00:00]]) [30] [CITE[WEBTECH - webtech:vantguarde]] ([CODE[2007-04-21 11:56:37 +09:00]] 版) ([[名無しさん]] [WEAK[2007-04-21 03:09:02 +00:00]]) [31] >>29-30 これも IE8 の真標準モードでは修正するけど新奇癖モード (旧標準モード) では修正しないとかいいだすのか?? ([[名無しさん]] [WEAK[2007-04-21 03:10:33 +00:00]]) [32] [CITE@ja[Shishimushi - Wii Opera のCSSセレクタ対応状況]] ([CODE[2007-04-23 09:04:06 +09:00]] 版) ([[名無しさん]] [WEAK[2007-04-23 00:07:17 +00:00]]) [33] [CITE@ja[Lucky bag::blog: こんなセレクタが CSS にあれば便利なのにと思うセレクタ]] ([[e-luck]] 著, [CODE[2007-04-23 09:20:35 +09:00]] 版) [[FAQ]] 嫁だな。 ([[名無しさん]] [WEAK[2007-04-23 00:24:02 +00:00]]) [34] [CITE@en[SlickSpeed Selectors Test]] ([CODE[2007-06-24 17:16:08 +09:00]] 版) ([[名無しさん]] [WEAK[2007-06-24 09:48:18 +00:00]]) [36] [CITE@ja[あったらいいのに CSS セレクタ | WWW WATCH]] ([CODE[2007-07-13 22:32:58 +09:00]] 版) ([[名無しさん]]) [37] [CITE@ja[Taken SPC : Web 標準の日々]] ([CODE[2007-07-22 14:56:32 +09:00]] 版) ([[名無しさん]]) [38] [CITE[Bug 75375 – support for :nth-*() pseudo-classes]] ([CODE[2007-07-22 14:56:46 +09:00]] 版) ([[名無しさん]]) [39] [CITE[Bug 65133 – implement CSS3 selectors]] ([CODE[2007-07-22 14:56:47 +09:00]] 版) ([[名無しさん]]) [40] [CITE[seamonkey mozilla/layout/style/nsCSSRuleProcessor.cpp]] ([CODE[2007-07-13 05:10:23 +09:00]] 版) ([[名無しさん]]) [41] [CITE[Latest topics > selector.js改 - outsider reflex]] ([[Piro(SHIMODA Hiroshi)]] 著, [CODE[2007-08-04 11:26:26 +09:00]] 版) ([[名無しさん]] [WEAK[2007-08-04 02:29:16 +00:00]]) [42] [CITE@en[Dust-Me Selectors]] ([CODE[2007-08-04 12:09:02 +09:00]] 版) ([[名無しさん]]) [43] これは[[選択子]]仕様書の[[文法]]的には認められないような。。。 ([[名無しさん]]) [44] [CITE[Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex]] ([[Piro(SHIMODA Hiroshi)]] 著, [CODE[2007-09-13 21:17:21 +09:00]] 版) ([[名無しさん]]) [45] [CITE@en[rikkertkoppes.com ✤ thoughts - css syntax in graph]] ([CODE[2007-10-23 20:26:41 +09:00]] 版) ([[名無しさん]]) [46] [CITE@en[Selectors]] ([CODE[2006-10-11 08:57:04 +09:00]] 版) ([[名無しさん]]) [47] [CITE@en[Selectors]] ([CODE[2008-06-28 08:01:06 +09:00]] 版) [48] [CITE[CSSセレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - uupaaの開発日記]] ([TIME[2009-01-26 10:33:51 +09:00]] 版) [49] [CITE[ブラウザがネイティブに実装しているCSSセレクタ(querySelectorAll)で良くわからないところ - latest log]] ([TIME[2009-02-10 20:25:38 +09:00]] 版) [52] [CITE[Bug 65133 – implement CSS3 selectors]] ([TIME[2009-02-21 20:59:38 +09:00]] 版) [53] [CITE@en[Selectors Level 3]] ([TIME[2009-03-10 22:17:53 +09:00]] 版) [54] [CITE@en[Selectors Level 3]] ([TIME[2009-12-15 08:41:18 +09:00]] 版) [55] [CITE[IRC logs: freenode / #whatwg / 20101029]] ( ([TIME[2010-11-08 23:38:21 +09:00]] 版)) [56] [CITE@en[Selectors Level 4 ''''''[''''''CSS Working Group Wiki'''''']'''''']] ( ([TIME[2011-06-16 08:26:17 +09:00]] 版))