セレクターズ レベル4

1. はじめに

このセクションは規範的ではありません。

セレクターはツリー構造内の要素を受け取り、その要素がセレクターに一致するかどうかを判定するブール述語です。

これらの式は様々な用途で使われます：

• 要素そのものに対して、特定の条件に合致するかをテストする （[DOM]で定義されたelement.matches()関数など）
• 要素ツリー全体に適用し、条件に合致する要素の集合に絞り込む （[DOM]で定義されたdocument.querySelectorAll()関数やCSSスタイルルールのセレクターなど）
• 「逆方向」で用いて、与えられたセレクターに合致するマークアップを生成する （HAMLやEmmetなど）

Selectors Level 1、2、3はそれぞれCSS1、CSS2.1、Selectors Level 3仕様で定義されたセレクター機能の部分集合です。本モジュールはSelectors Level 4を定義します。

1.1. モジュールの相互関係

本モジュールは、[SELECT]および[CSS21]でCSS用に定義されたセレクターの定義を置き換え、拡張します。

描画ツリーの抽象要素を定義する疑似要素セレクターは本仕様には含まれていません。 疑似要素の一般的な構文はここで説明しますが、描画モデルとの強い統合やDOMクエリ等他用途への無関係さのため、それらの詳細は他のモジュールで定義されます。

2. セレクターの概要

このセクションは規範的ではなく、以下のセクションの要約のみを行います。

セレクターは構造を表現します。この構造は（例えばCSSルールで）条件として使われ、文書ツリー内でどの要素がセレクターに一致するかを判定したり、その構造に対応するHTMLやXML断片の平易な記述として用いることができます。

セレクターは単純な要素名から文脈依存のリッチな表現までさまざまです。

以下の表はセレクター構文の概要です：

注: 上記で「3-UI」と記したLevel 4セレクターの一部は、[CSS3UI]で導入されたものです。

3. セレクターの構文と構造

3.1. 構造と用語

セレクターは、ツリー構造内の特定の要素パターンを表します。 セレクターという用語は、単純セレクター、複合セレクター、複雑セレクター、またはセレクターリストを指すことがあります。 セレクターの対象は、 そのセレクターが定義されている任意の要素、 すなわちそのセレクターに一致する要素です。

単純セレクターは、要素に対する単一の条件です。 型セレクター、ユニバーサルセレクター、 属性セレクター、 クラスセレクター、IDセレクター、 または擬似クラスは単純セレクターです。 （これは、セレクターの<simple-selector>として構文で表されます。） ある要素が単純セレクターに一致すると言うのは、 この仕様および文書言語に従って、 その単純セレクターが要素を正確に記述している場合です。

複合セレクターは、 単純セレクターが結合子なしで連続したシーケンスであり、 単一の要素に対する同時の条件集合を表します。 もし型セレクターまたはユニバーサルセレクターを含む場合、それはシーケンスの最初でなければなりません。 シーケンス中に型セレクターまたはユニバーサルセレクターは1つだけ許されます。 （複合セレクターはセレクターの<compound-selector>として構文で表されます。） ある要素が複合セレクターに一致するとは、 その複合セレクター内の全ての単純セレクターに一致する場合です。

注: 空白は子孫結合子を表すため、 複合セレクター内の単純セレクター同士の間には空白を入れてはいけません。

疑似複合セレクターとは、疑似要素セレクターであり、必要に応じて追加の疑似クラスセレクターが続く場合があります。また、必要に応じて複合セレクターまたは他の疑似複合セレクターが前に配置される場合もありますが、結合子は含まれません。 （疑似複合セレクターは、セレクター<pseudo-compound-selector>として文法内で表現されています。） 疑似要素は、指定された疑似要素名が一致し、追加の疑似クラスによる条件にも一致し、隣接する直前のセレクターによって表される発生元要素を持つ場合、疑似複合セレクターに一致します。 もし隣接する直前のセレクターが存在しない場合は、全称セレクターが仮定されます。 （例えば、.foo ::beforeは.foo *::beforeと同等であり、.foo::beforeとは異なります。）

注: 疑似複合セレクターは複合セレクターではなく、 複合セレクターのみが要求される場所で使用できません。疑似複合セレクターは自分自身と結合子を持つかのように動作し、 起源要素との関係を表します。 これは>結合子が親要素との関係を表すのと同様です。

結合子は、 両側の複合セレクターで表される二つの要素間の関係条件です。 Selectors Level 4での結合子には、 子孫結合子（空白）、 子結合子（U+003E,>）、 直後兄弟結合子（U+002B,+）、 後続兄弟結合子（U+007E,~）があります。 二つの要素が、これらの間に定められた関係条件を満たすとき、その結合子に一致すると言います。

複雑セレクターは、 一つ以上の複合セレクターおよび/または疑似複合セレクターを、 複合セレクター同士は結合子で区切ったシーケンスです。 これは、結合子で規定される関係内にある要素群に対する同時条件群を表します。 （複雑セレクターは<complex-selector>として構文で表されます。） ある要素または疑似要素が複雑セレクターに一致すると言うのは、 シーケンスの最後の複合/疑似複合セレクターに一致し、 かつその前の各単位も前に続く要素または疑似要素に 結合子で区切られた正しい関係を持つ場合 （または疑似複合セレクターの場合は正しい起源要素関係を持つ場合）です。

単純/複合/複雑セレクターのリストは、 単純、複合、 または複雑セレクターのカンマ区切りのリストです。 この型が文脈で重要でなかったり明示されている場合は、単にセレクターリストとも呼ばれます。 型が重要かつ未指定の場合は、複雑セレクターのリストを意味します。 （§ 4.1 セレクターリストや構文の各<*-selector-list>生成規則参照。） ある要素がセレクターリストに一致するとは、 そのセレクターリスト内のいずれかひとつのセレクターに一致する場合です。

3.2. データモデル

セレクターはDOMなどの要素ツリーに対して評価されます。[DOM] この仕様内では「文書ツリー」や「ソース文書」と呼ぶこともあります。

各要素は、以下の5つの側面のいずれも持つことができ、 それぞれに対して選択ができ、すべて文字列として照合されます：

• 要素の型（タグ名とも呼ばれる）
• 要素の名前空間
• ID
• 所属するクラス（名前付きグループ）
• 属性（名前と値のペア）

多くのセレクターは、文書言語（すなわち文書ツリーの言語と意味）や、 ホスト言語（セレクター構文を使用する言語）の意味に依存します。 例えば、:lang()セレクターは文書言語（例: HTML）に 要素がどのように言語と関連付けられるかの定義を依存します。 少し異なる例として、 ::first-line疑似要素は ホスト言語（例: CSS)）に その::first-line疑似要素の意味や動作を委ねています。

3.2.1. 属性のない要素

個々の要素が上記のいずれの特徴も持たない場合もありますが、 いくつかの要素は特徴なし（featureless）となります。 特徴なし要素は、 いかなるセレクターにも一致しませんが、以下の例外を除きます:

• 明示的に一致することが定義されている単純セレクター

• 含まれるすべての単純セレクターが一致可能な場合、複合セレクター

• ターゲットとなる複合セレクターが一致可能である場合、複雑セレクター

• リスト内の少なくとも1つが一致可能な場合、セレクターリスト

• 引数セレクターが一致可能な場合、論理結合疑似クラス

• かつ、それを構成する複合セレクターに 一致可能な他の単純セレクターが少なくとも1つ含まれている場合のみ、:has()疑似クラス

もしもデフォルト名前空間[CSS-NAMESPACES-3]の存在（特徴なし要素は明示されない限り名前空間を持たないため）を除けば、あるセレクターが特徴なし要素に一致する場合、 デフォルト名前空間は一致を妨げません。

3.3. スコープ付きセレクター

一部のホストアプリケーションは、セレクターを特定のドキュメント部分木またはフラグメントにスコープすることを選択する場合があります。 このスコープされる部分木のルートは、スコーピングルートと呼ばれます。

セレクターがスコープ付きである場合、 その要素がスコープルートの子孫であればのみ一致します。 （それ以外の部分は制限なく一致可能です； スコープ内に最終的に一致する要素であることのみが条件です。）

3.4. 相対セレクター

特定の文脈においては、相対セレクターが利用できます。 これらは要素を一つ以上の相対セレクターアンカー要素に対して相対的に表現するセレクターの短縮形です。 相対セレクターは結合子で始まり、 先頭にアンカー要素を表現するセレクターが暗黙で入ります。 （結合子が存在しない場合、 子孫結合子が暗黙となります。）

相対セレクターは、セレクター文法において<relative-selector>として表現され、 それらのリストは<relative-selector-list>で表されます。

3.5. 疑似クラス

疑似クラスは単純セレクターの一種で、 文書ツリー外の情報や、他の単純セレクターでは表現しにくい／不可能な基準で選択を可能にします。 また、動的であり得ます。 つまりユーザーが操作することで要素が疑似クラスを獲得・喪失することができ、 文書自体に変化がなくとも状態が変化します。疑似クラスは文書ソースやツリーに現れず、またそれを変更もしません。

疑似クラスの構文は ":" (U+003A コロン) に続いて、そのCSS 識別子名を書きます。 そして関数疑似クラスの場合、 引数を含む丸括弧が続きます。

例えば、:validは 通常の疑似クラスであり、 :lang()は 関数疑似クラスです。

全てのCSSキーワード同様、疑似クラス名はASCII 大文字小文字無視です。 疑似クラス名の直前のコロンと名前の間に 空白は許可されません。 また、CSS構文の通例として、 関数疑似クラス名と開き括弧の間の空白も認められません （両者でCSS 関数トークンとなります）。 ただし、通常通り 関数疑似クラスの括弧内の引数の前後には（指定がなければ）空白を入れてもかまいません。

他の単純セレクター同様、疑似クラスは セレクター内のすべての複合セレクターで許可され、 型セレクターや 全称セレクターの後に置く必要があります（もし存在するなら）。

注意: 一部の疑似クラスは互いに排他的 （このためそれらを同時に含む複合セレクターは 妥当でも何にも一致しなくなります）ですが、 その他は同時に一つの要素に適用できます。

3.6. 疑似要素

一部の疑似クラスが文書ツリー内に直接現れない追加の状態情報を表すのと同様に、 疑似要素は文書ツリーに直接存在しない要素を表します。 疑似要素はドキュメントツリーの持つ以上の抽象的な構成要素を作成するために使用されます。 例えば、 疑似要素は文書内の一部分を選択できますが、 これらの部分は文書言語の要素に対応せず （要素の境界に一致しない範囲やツリー構造内に収まらない範囲を含む）、 文書ツリー内に存在しない内容や別の射影（プロジェクション）内容、 またはスタイリング・レイアウト・ユーザー操作・その他ドキュメントツリーに反映されない様々なプロセスによって決まる情報に依存した部分を表します。

疑似クラスと同様に、 疑似要素も 文書ソースや文書ツリーには現れず、またそれを変更しません。 従って、構造疑似クラスや 起点要素、 そのツリー構造などに関わる他のセレクターの解釈にも影響を与えません。

どの疑似要素が存在するか・型・機能などはホスト言語が定義します。 CSSで存在する疑似要素は、 [CSS21]（レベル2）・ [SELECT]（レベル3）・ [CSS-PSEUDO-4]（レベル4）で定義されています。

3.6.1. 構文

疑似要素の構文は "::"（コロン2つ, U+003A） に続けて、 疑似要素名（識別子）を書きます。 関数疑似要素の場合は、 括弧で引数を指定します。疑似要素名は ASCII大小区別なしです。 二つのコロン同士・コロンと名前の間に 空白は許可されません。

CSS Level 1やCSS Level 2 では疑似要素と疑似クラスが1コロン記法で混同されていたため、 ユーザーエージェントは1コロン記法によるレベル1・2の疑似要素 （::before, ::after, ::first-line, ::first-letter ）も受け入れなければなりません。 ただしこの互換記法は他の疑似要素には許可されません。 しかしながら、この記法は非推奨なので、 レベル3以降のすべての疑似要素では 2コロン記法を使うべきです。

疑似要素は特徴なしであり、 他のいかなるセレクターでも一致しません。

3.6.2. 文書ツリーへの結合

疑似要素はツリー内で独立して存在せず、 常にページ内の別の要素に結びつけられます。 これを疑似要素の起点要素と呼びます。 構文上は、疑似要素は その複合セレクター（=起点要素）に直後で続きます。 この複合セレクターが省略された場合、 全称セレクター * であると見なします。

セレクター中で疑似要素 が現れた場合、 その疑似要素より前の部分が疑似要素の 起点要素を選択します。 疑似要素より後ろの部分があれば、それは疑似要素自身に適用されます。 （下記参照。）

3.6.3. 疑似要素の状態（疑似クラス化）

特定の疑似要素は 直後に特定の疑似クラスを任意に組み合わせて続けることができ、 その場合は疑似要素が対応する状態のときのみ表現されます。 本仕様は任意の疑似要素が、 論理結合疑似クラスおよび ユーザーアクション疑似クラス を任意に組み合わせて続けることを認めています。 他仕様で特定の疑似クラスが 個別の疑似要素に付与可能になる場合もあります。 明示的に認められていない組み合わせは、 無効なセレクターです。

注意: 論理結合疑似クラス は、その位置でのセレクターの妥当性について制限があれば それを引数に伝播します。

3.6.4. サブ疑似要素

一部の疑似要素は 他の疑似要素の起点要素となれます。 これを、そのサブ疑似要素、 起点疑似要素 と呼びます。 例えば::beforeに list-itemのdisplay型 を指定した場合、 起点疑似要素である ::before::markerのサブ疑似要素が定義されます。

区別が必要な場合、 究極の起点要素とは （疑似ではない）本物の要素のことで、 そこから疑似要素が派生しています。

該当のサブ疑似要素が他仕様で明示的に定義されていない場合、 疑似要素セレクターを他の疑似要素セレクターに連結して使うことはできません。 したがって::before::beforeは無効なセレクターですが、 ::before::markerは （後者の::before::marker サブ疑似要素をサポートする実装で）有効です。

3.6.5. 内部構造

一部の疑似要素は 内部構造をもつと定義されます。 これら疑似要素には 子孫結合子・子結合子などを使って その関係を表現可能です。 疑似要素の後に結合子が来るセレクターは、 それ以外は無効となります。

注意: 今後の仕様で既存疑似要素の機能が拡張される可能性があり、 現時点で無効なセレクター（例：::first-line :any-link） も将来的に有効となるかもしれません。

このような疑似要素の子要素は、同時に他の要素の子要素でもあり得ます。 ただし少なくともCSSでは、ボックスツリー の「木構造性」が維持されるような描画が規定されなければなりません。

3.7. 文字と大文字小文字の区別

すべてのセレクター構文は ASCII大文字小文字無視（すなわち [a-z] と [A-Z] は等価）ですが、 セレクターが制御しない部分、 具体的には ドキュメント言語の要素名・属性名・属性値の 大文字小文字の区別は ドキュメント言語に依存します。

名前空間接頭辞の大文字小文字の扱いは [CSS3NAMESPACE] で定義されています。 言語範囲 の大文字小文字の取扱いは :lang()節で定義されています。

セレクターにおける 空白 には SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), CARRIAGE RETURN (U+000D), FORM FEED (U+000C) だけが含まれます。 その他の空白様コードポイント（EM SPACE (U+2003) や IDEOGRAPHIC SPACE (U+3000) など）は 構文上の空白とはみなされません。

セレクター内のコードポイントは、CSSと同じエスケープ規則に従い、バックスラッシュでエスケープできます。 [CSS21] コードポイントをエスケープすると、セレクター内でその文字が持つ特別な意味が「打ち消される」ことに注意してください。 たとえば、セレクター #foo>a にはコンビネーターが含まれますが、#foo\>a は代わりに ID が foo>a の要素を選択します。

3.8. 名前空間接頭辞の宣言

特定のセレクターは名前空間接頭辞をサポートします。 名前空間接頭辞を宣言する仕組みは セレクターを利用する言語ごとに定める必要があります。 もし言語が接頭辞の宣言方法を定めない場合、 宣言済みの接頭辞は存在しません。 CSSでは@namespace規則で 宣言します。 [CSS3NAMESPACE]

3.9. 無効なセレクターとエラー処理

ユーザーエージェントは、無効なセレクターの取り扱いルールを順守しなければなりません：

• セレクター内で構文エラーが発生した場合、 例：未認識のトークン、または現在の解析位置で許可されていないトークン （全体の§ 16 文法および個々のセレクター構文定義参照）、 そのセレクターは無効となります。
• 未宣言の名前空間プレフィックスを含む単純セレクターは無効です。
• 無効な単純セレクター・無効な結合子・無効なトークンを含むセレクターも無効です。
• 無効なセレクターを含むセレクターリストも無効です。
• 空のセレクター（すなわち、複合セレクターを1つも含まないもの）も無効です。

注: CSSの将来互換性ある構文解析原則に従い、 ユーザーエージェントは、使用可能なサポートレベルが存在しない 任意の疑似クラス・疑似要素・結合子・またはその他構文要素を 無効として扱う必要があります。 部分的な実装も参照してください。

無効なセレクター は「何にも一致しない」ことを表し、よって何も一致しません。

3.10. レガシー別名

いくつかのセレクターはレガシーセレクター別名を持ちます。 これは構文解析時に標準名へ変換される名称であり、 （よってセレクターを表すいかなるオブジェクトモデルにも現れません）。

4. 論理結合

セレクターの論理は、複合化（論理積・AND）、セレクターリスト（論理和・OR）、 そして論理結合疑似クラスである :is()、:where()、:not() によって操作できます。 論理結合疑似クラスは 他のどの疑似クラスでも許可される場所で使用できますが、 その引数にも制限を伝播します。 （例：複合セレクターのみが許可される場合、 :is()の内部でもそれだけが有効です。）

注: :is()や:where()の内部では、 無効な引数はその疑似クラス自体を無効化せず 落とされるため、 文脈上の制限で無効化される引数も同様に:is()疑似クラス自体を無効化しません。

4.1. セレクターリスト

カンマ区切りのセレクターリストは、 セレクターリスト内の各セレクターによって選択される全要素の合計（和集合）を表します。 （カンマはU+002C。） 例えば、CSSでは複数のセレクターで同じ宣言を共有する場合、 それらをカンマ区切りリストとしてまとめることができます。 カンマの前後に空白文字を置くことができます。

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2, h3 { font-family: sans-serif }

警告: この例の等価性は、すべてのセレクターが有効である場合にのみ成り立ちます。 いずれか1つでも無効なものがあると、 セレクターリスト全体が無効となります。 この場合、3つの見出しすべてのスタイル規則が無効になるのに対し、 前者の場合では個々の見出しルールのうち1つだけが無効となります。

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2..foo, h3 { font-family: sans-serif } 

4.2. 任意一致疑似クラス: :is()

任意一致疑似クラス（:is()）は、 <forgiving-selector-list>を 唯一の引数として受け取る関数型疑似クラスです。

引数が構文解析後に空リストだった場合でも， この疑似クラスは有効ですが何にも一致しません。 それ以外の場合，そのリスト中のいずれかのセレクターに一致する要素すべてにこの疑似クラスは一致します。

注: :is()疑似クラスの 詳細度（specificity）は、引数リスト中で最も詳細度の高いものに置き換えられます。 したがって:is()を使ったセレクターは， 同じ意味のセレクターでも:is()を使わずに書いた場合と 詳細度が一致するとは限りません。 例えば:is(ul, ol, .list) > [hidden]とul > [hidden], ol > [hidden], .list > [hidden]の場合， ol の子要素で[hidden]なものは 前者のセレクターには(0,2,0)の詳細度で一致し， 後者のセレクターには(0,1,1)の詳細度で一致します。 § 15 セレクターの詳細度計算参照。

疑似要素は任意一致疑似クラスでは表現できません。 :is()内で使うことはできません。

デフォルト名前空間宣言は， 複合セレクターが 明示的な全称セレクター または型セレクターを 含まない限り、 :is() 疑似クラス内で各セレクターの主語を表す複合セレクターには影響しません。

*|*:is(:hover, :focus) 

*|*:is(*:hover, *:focus) 

この仕様の旧草案では この疑似クラスの名前に :matches()が使われていたため， 必要であれば、ユーザーエージェントは後方互換のため レガシーセレクター別名 として:is()の別名も実装可能です。

4.3. 否定（非一致）疑似クラス: :not()

否定疑似クラス（:not()）は、 <complex-real-selector-list> を引数にとる関数型疑似クラスです。 この疑似クラスは、引数で表されていない要素を表します。

注: Selectors Level 3 では、 単一の単純セレクターだけが :not()の引数として許可されていました。

注: :not()疑似クラスの詳細度は、 引数の中で最も詳細度が高いセレクターの値で置き換えられます。 そのため、:not(:is(argument))と全く同じ挙動となります。 § 15 セレクターの詳細度計算参照。

疑似要素は否定疑似クラスで表現できません。 :not()内部で使用できません。

button:not([DISABLED]) 

*:not(FOO)

html|*:not(:link):not(:visited)

:is()同様、 デフォルト名前空間宣言は、 複合セレクターが 明示的な全称セレクター や型セレクター を含まない限り、 :not()疑似クラス内部の各セレクターの主語を表す複合セレクターには影響しません。 （例については:is()を参照。）

注: :not()疑似クラスは 無意味なセレクターを書くことも可能です。 例えば:not(*|*)は何の要素も表さず、 またdiv:not(span)はdivと等価ですが、詳細度が高くなります。

4.4. 詳細度調整疑似クラス: :where()

詳細度調整疑似クラス（:where()）は、 :is()と同じ構文・機能を持つ関数型疑似クラスです。 しかし、:is()と異なり、 :where()疑似クラス自身も その引数となるどのセレクターも、 セレクターの詳細度に影響を与えません。詳細度は常に0となります。

これはスタイル宣言を上書きしやすい状態を保ったまま、セレクターにフィルター処理を加えたい場合に有用です。

a:not(:hover) {
  text-decoration: none;
}

nav a {
  /* Has no effect */
  text-decoration: underline;
}

a:where(:not(:hover)) {
  text-decoration: none;
}

nav a {
  /* Works now! */
  text-decoration: underline;
}

注: 今後のSelectorsレベルでは、 この疑似クラスに与える個別の詳細度引数が導入される可能性があります。

4.5. 関係疑似クラス: :has()

関係疑似クラス（:has()）は、 <relative-selector-list> を引数にとる関数型疑似クラスです。 この疑似クラスは、この要素をアンカー（基準）要素として相対セレクターのいずれかが 少なくとも1つの要素にマッチした場合、この要素自身を一致対象とします。

:has() 疑似クラスは ネストできません。:has() の中に :has() を書くことは無効です。 また、明示的に :has-allowed 疑似要素 として定義されていない限り、 疑似要素は :has() 内でセレクターとして使用できません。 （本仕様では :has-allowed 疑似要素は定義されていませんが、 他の仕様で定義される場合があります。）

注: 疑似要素の多くは祖先のスタイリング状況など、条件付きで存在するため、 通常:has()では疑似要素が除外されます。 :has()でこれらを照会できるようにすると依存関係の循環が生じるためです。

注: :has()は <relative-selector-list>を取るため、 その引数は本質的に複雑セレクター（先頭に結合子を持つもの）となります。 よって:has()は、複雑セレクターが許可されない文脈では使用できません。 その場合は引数が必ず無効になります。

a:has(> img)

dt:has(+ dt)

section:not(:has(h1, h2, h3, h4, h5, h6))

section:has(:not(h1, h2, h3, h4, h5, h6))

5. 要素セレクター

5.1. 型（タグ名）セレクター

型セレクターは、文書言語の要素型の名前で表され、 文書ツリー内でその型の要素インスタンスを示します。

型セレクターはCSS修飾名として書かれます。 これは、オプションの名前空間プレフィックス付きの識別子です。[CSS3NAMESPACE]（§ 5.3 要素セレクターにおける名前空間参照）

5.2. 全称セレクター

全称セレクターは 特別な型セレクターであり、 すべての要素型の要素を表します。

これはローカル名としてアスタリスク（* U+002A）を用いた CSS 修飾名として記述されます。 型セレクターと同様に、 全称セレクターも 名前空間による修飾が可能であり、 その名前空間の要素にのみ限定したり、 § 5.3 要素セレクターにおける名前空間で定義されるデフォルト名前空間の影響を受けます。

要素が特徴なしでなければ、 全称セレクターの有無は その要素がセレクターに一致するかどうかに影響しません。 （特徴なし要素は、 全称セレクターを含むいかなるセレクターにも一致しません。）

全称セレクターも 他の型セレクターと同じ構文ルールに従います： 複合セレクターあたり1つだけ現れることができ、 複合セレクター内で最初の単純セレクターでなければなりません。

注: いくつかの場合、全称セレクターを追加すると 一致動作には影響しないものの セレクターが読みやすくなるというメリットがあります。 例：div :first-childとdiv:first-childは 一見して区別しにくいですが、 前者にdiv *:first-childと書くことで明確さが増します。

5.3. 要素セレクターにおける名前空間

型セレクターと全称セレクターは オプションで名前空間部分を持つことができ、 先に宣言された名前空間プレフィックスを 縦棒（| U+007C）区切りで要素名の前につけられます。 （XMLでの名前空間利用例については [XML-NAMES]参照） それぞれの形には次の意味があります：

ns|E

名前空間ns内の名前Eの要素

*|E

すべての名前空間（名前空間なし含む）に属する名前Eの要素

|E

名前空間なしの名前Eの要素

E

セレクター用のデフォルト名前空間が宣言されていなければ、*|Eと等価。 そうでなければデフォルト名前空間nsに属するns|Eと等価。

@namespace foo url(http://www.example.com);
foo|h1 { color: blue }  /* first rule */
foo|* { color: yellow } /* second rule */
|h1 { color: red }      /* ...*/
*|h1 { color: green }
h1 { color: green }

デフォルト名前空間が宣言されている場合は、 型セレクターの無い複合セレクターも そのデフォルト名前空間内の要素のみに一致します。

@namespace url("http://example.com/foo");

.special { ... }

先に宣言されていない名前空間プレフィックスを含む 型セレクターや 全称セレクターは 無効なセレクターです。

5.4. 定義済み疑似クラス: :defined

一部のホスト言語では、 要素が「定義済み」や「構築済み」であるかどうかという区別が存在します。 :defined 疑似クラスは、 ホスト言語の定義に従い、完全に定義された要素と一致します。

そのような区別がないホスト言語では、 すべての要素が:definedに一致します。

p:defined { ... }

custom-element { visibility: hidden }

custom-element:defined { visibility: visible }

6. 属性セレクター

セレクターは要素の属性を表現できます。 セレクターを要素との照合式として用いる場合、 属性セレクターは、 その要素が属性セレクターで表される属性を持っていれば 一致したものとして扱われます。

複数値マッチ用にカンマ区切り構文を追加するか？ 例: [rel ~= next, prev, up, first, last]

6.1. 属性の有無・値によるセレクター

CSS2では4つの属性セレクターが導入されました：

[att]

属性attがあれば、 その値に関わらず要素を表します。

[att=val]

属性attがあり、 その値が正確に "val" である要素を表します。

[att~=val]

属性attがあり、 その値が空白区切り単語リストであり、 そのいずれかが正確に"val"である要素を表します。 "val"に空白が含まれている場合は （単語はスペースで区切るため）決して一致しません。 また、"val"が空文字列でも一致しません。

[att|=val]

属性attがあり、 その値が正確に "val" か、"val" 直後に"-"（U+002D）が続く場合のいずれかである要素を表します。 これは主に言語サブコードのマッチング （例：HTMLのa要素の hreflang属性など）を意図しています。 詳細はBCP 47 ([BCP47]) または後継仕様を参照してください。 lang（またはxml:lang）の言語サブコードマッチングについては :lang()疑似クラスを参照してください。

属性値は<ident-token>または<string-token>でなければなりません。[CSS3SYN]

h1[title]

span[class="example"]

span[hello="Cleveland"][goodbye="Columbus"]

a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }

a[hreflang=fr] 

a[hreflang|="en"] 

DIALOGUE[character=romeo]
DIALOGUE[character=juliet]

6.2. 部分文字列一致属性セレクター

属性値内の部分文字列にマッチする属性セレクターも3種類あります：

[att^=val]

属性attの値が"val"で始まる要素を表します。 "val"が空文字列の場合は一致しません。

[att$=val]

属性attの値が"val"で終わる要素を表します。 "val"が空文字列の場合は一致しません。

[att*=val]

属性attの値が"val"を少なくとも1回含む要素を表します。 "val"が空文字列の場合は一致しません。

属性値は<ident-token>または<string-token>でなければなりません。

object[type^="image/"] 

a[href$=".html"] 

p[title*="hello"] 

6.3. 大文字小文字の区別

デフォルトでは、セレクター内の属性名や値の大文字小文字の区別は ドキュメント言語に依存します。

属性値をドキュメント言語の規則に関係なく、ASCII大小区別なし で一致させたい場合は、 属性セレクターの閉じカッコ（]）の直前に識別子iを追加できます。 このフラグがあれば UAは属性値をASCII大小区別なし （[a-z]と[A-Z]は等価とみなす）で照合しなければなりません。

または、属性セレクターの閉じカッコ（]）の直前に識別子sを追加できます。 この場合 UAは値の大文字小文字を区別して “完全一致”の意味で照合しなければなりません[INFRA]。 ドキュメント言語の規則に関係ありません。

他のセレクター構文と同様に、 i や s 識別子自体も ASCII大小区別なしです。

[frame=hsides i] { border-style: solid none; } 

[type="a" s] { list-style: lower-alpha; }
[type="A" s] { list-style: upper-alpha; }

注: 一部の文書モデルでは、属性値を 解析時に大文字小文字なしで正規化してしまうため、 以降で大文字小文字を区別した一致判定ができない場合があります。 sフラグによる大文字小文字区別付きの一致は、 元の大文字小文字を保持するシステムでのみ可能です。

6.4. 属性セレクターと名前空間

属性セレクター内の属性名は CSS修飾名で記述します。 すでに宣言された名前空間プレフィックスを 名前空間区切り記号「縦棒」（|）で区切って属性名の前につけることができます。 XML Namespaces勧告に従い、デフォルト名前空間は属性には適用されません。 したがって、名前空間なしで属性セレクターを書くと 名前空間のない属性だけ（|attrと等価）に一致します。 名前空間プレフィックスとしてアスタリスクを使うと、 属性の名前空間を問わずすべての属性名に一致します。

名前空間プレフィックスが宣言されていない 属性名を含む属性セレクターは無効セレクターです。

@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }

6.5. DTDにおけるデフォルト属性値

属性セレクターは文書ツリー内の属性値を表します。 その文書ツリーをどのように構築するかはSelectorsの範囲外です。 一部の文書形式ではDTDや他の場所でデフォルト属性値を定義できますが、 それが文書ツリー内に現れていなければ属性セレクターで選択できません。 デフォルト値がツリーに含まれていない場合もセレクターが動作するよう設計すべきです。

例えば、XML UAはDTDの「外部サブセット」を読み込んでも良いし、 必須ではありません。 ただし文書の「内部サブセット」にあるデフォルト属性値は 必ず参照しなければなりません。 （これらの区分の定義は[XML10]参照） UAによっては、DTDの外部サブセットで定義されたデフォルト属性値が 文書ツリーに現れたり現れなかったりします。

XML名前空間を認識するUAは、その名前空間に関する知識を使って デフォルト属性値が文書内に存在するかのように扱ってもよいし、 そうしなくてもかまいません。 （例えばXHTML UAは、組込みXHTML DTDの知識を利用する必要はありません。 詳細は[XML-NAMES]参照）

注: 一般的に実装は外部サブセットを無視することが多く、 これはXML仕様で定義されるnon-validatingプロセッサの挙動に対応します。

<!ATTLIST EXAMPLE radix (decimal,octal) "decimal"> 

EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
EXAMPLE[radix=octal]   { /*... other settings...*/ }

EXAMPLE                { /*... default property settings ...*/ }
EXAMPLE[radix=octal]   { /*... other settings...*/ }

6.6. クラスセレクター

クラスセレクターは、 ピリオド（. U+002E）に続けて識別子を書く形式です。 これは、識別子で指定されたクラスに属する要素を表します（具体的なクラスの定義は文書言語によります）。 たとえば[HTML5]や[SVG11]、 [MATHML]などでは クラスへの所属はclass属性によって与えられます。 これらの言語では、これはローカルのclass属性に対して ~=記法を使うのと同等です （すなわち [class~=識別子]）。

*.pastoral { color: green }  /* class~=pastoral を持つすべての要素 */ 

.pastoral { color: green }  /* class~=pastoral を持つすべての要素 */ 

H1.pastoral { color: green }  /* class~=pastoral なH1要素 */ 

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

p.pastoral.marine { color: green } 

注: CSSは class 属性に強力な機能を与えているため、 作者がdivやspan など表示意味をほとんど持たない要素のみで文書言語を設計し、 クラスによるスタイル指定だけで見た目を制御することも理論上は可能です。 しかし文書言語の構造要素には一般に認知された意味づけが存在し、 作者独自クラスはそうならない場合も多いので、このやり方は避けるべきです。

注: 要素が複数の class属性を持つ場合、その値は空白で連結してからクラス検索が行われます。 ただし現時点でこのような状況に到達する手段は存在しないとWGは認識しており、 この挙動は仕様上非規範的です。

ドキュメントがクイークスモードの場合、 クラス名の照合はASCII大小区別なしで 行われなければなりません。 それ以外の場合はクラスセレクターは大文字小文字を区別して、 完全一致するクラス名だけが一致対象です。[INFRA]

6.7. IDセレクター

文書言語にはID型として宣言された属性を持つ場合があります。 ID型の属性の特別な点は、適合文書ではどのような要素型であろうと、 そうした属性同士で値が重複してはならない点です。 文書言語が何であれ、ID型属性は要素を一意に識別できます。 HTMLではすべてのID属性名はidですが、 XMLアプリケーションではID属性に異なる名前を付ける場合もあり得ますが、同じ制約が適用されます。 どの属性が要素の「ID属性」と見なされるかは文書言語が定義します。

IDセレクターは “ナンバーサイン”（U+0023、#）にID値を直結して書きます（値はCSSの識別子でなければなりません）。 IDセレクターは、そのIDセレクターの識別子と一致するIDを持つ 要素インスタンスを表します。 （非適合文書では複数の要素が同じIDセレクターに一致する可能性もあります。）

h1#chapter1 

#chapter1 

*#z98y 

注: XML 1.0 [XML10] では、 要素IDを格納する属性を定義する情報はDTDまたはスキーマ内に記述されています。 XML解析時、UAはDTDを常に読み込むとは限らず、 その場合要素のIDがどれか不明かもしれません（ただし、UAが名前空間固有の知識で どの属性がIDか判断できる場合もあります）。 スタイルシート作者が、UAが要素のIDを認識しない場合があると知っていたり疑う場合は、 #p371ではなく[name=p371]のような通常の属性セレクターを使うべきです。

もし一つの要素に複数のID属性がある場合、 それらすべてが当該要素のIDとしてIDセレクター照合の際に扱われます。 こうした状況は xml:id, DOM3 Core, XML DTDs, 名前空間固有知識を組み合わせて起きる場合があります。

ドキュメントがクイークスモードの場合、 IDはASCII大小区別なしで一致させなければなりません。 それ以外の場合はIDセレクターは大文字小文字を区別し、 完全一致するIDだけが一致します。[INFRA]

7. 言語疑似クラス

7.1. 方向性疑似クラス: :dir()

:dir() 疑似クラスは、要素の方向性（テキストの流れの方向）に基づいてセレクターを記述できるようにします。 方向性は文書言語により決定されます。 例えば、[HTML5]では 要素の方向性を決定する方法が dir属性や周囲のテキスト、その他の要素に基づいて定義されています。 また、Internationalization Tag Setのits:dirやdirRule要素は [ITS20]仕様により [XML10]文書で要素の方向性を指定できます。

:dir()疑似クラスは スタイル状態（たとえばCSSのdirectionプロパティ）には基づきません。 そのため、directionプロパティの値は一致条件に影響しません。

疑似クラス:dir(ltr)は 左から右（ltr）方向性の要素を表します。 :dir(rtl)は 右から左（rtl）方向性の要素を表します。 :dir()の引数は単一の識別子でなければならず、 そうでなければセレクターは無効です。 識別子と丸括弧の間に空白は任意で許可されます。 ltrおよびrtl以外の値は無効ではありませんが、一致対象がありません。 （将来他の方向性を定義する仕様が出れば、Selectors仕様もそれに合わせて拡張され得ます。）

:dir(C)と[dir=C]の違いは、 [dir=C]は要素の属性値との単純な比較のみ行うのに対し、 :dir(C)疑似クラスはUAが文書のセマンティクスを考慮して比較を行う点です。 たとえばHTMLでは、dir属性のない子要素は最も近い親（有効なdir属性を持つ）から方向性を継承します。 さらにHTMLでは、[dir=auto]に一致する要素は 内容によって解決された方向性に応じて :dir(ltr)または:dir(rtl)両方のいずれにも一致することがあります。 [HTML5]

7.2. 言語疑似クラス: :lang()

ドキュメントの言語が、要素の（人間向けの）コンテンツ言語の決定方法を指定している場合、要素のコンテンツ言語に基づいて要素を表すセレクターを記述することが可能です。 :lang()疑似クラスは、カンマ区切りで1つ以上の言語範囲を受け取ります。 この疑似クラスは、その引数に挙げられた言語のいずれかが、要素のコンテンツ言語である要素を表します。 :lang()内の各言語範囲は、有効なCSSの<ident>または<string>でなければなりません。 （たとえばアスタリスクを含む言語範囲は、正しくエスケープするか、文字列として引用する必要があります。 例：:lang(\*-Latn) または :lang("*-Latn") など。）

注: 要素の内容言語が どう定まるかは文書言語の仕様によります。

例えばHTML[HTML5]では、 内容言語はlang属性、 meta要素の情報、 場合によってはプロトコル（HTTPヘッダー等）からの情報の組合せによって定まります。 XML言語では、xml:lang属性で要素の言語情報を指定できます。[XML10]

要素の内容言語が言語範囲に一致する条件は、 その内容言語がBCP 47構文で表現され、 言語範囲と[RFC4647] Matching of Language Tags （3.3.2節）に準拠した拡張フィルタ操作で一致する場合です。 内容言語も言語範囲も [RFC5646]4.5節にしたがって 正規化しextlang形式に変換した上で一致判定を行います。 判定時はASCII範囲内で大文字小文字を区別しません。

言語範囲は 必ずしも有効な言語コードである必要はありません。

この目的で、ワイルドカード言語範囲（"*"）は、 言語がタグ付けされていない要素（例：lang=""）には一致しませんが、 言語がund（未定）とタグ付けされている要素（lang=und）には一致します。 空文字列だけからなる言語範囲 （:lang("")）は、言語タグを持たない要素だけに一致します。

注: 文書やプロトコルは、[BCP47]や後継仕様の言語コードを使い、 XML形式の場合xml:lang属性で指定するのが推奨されています。 [XML10]。 「FAQ：2文字/3文字言語コード」も参照。

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

注: :lang(C)と|=演算子の違いは、 |=は要素の属性値と単純比較をするだけですが、 :lang(C)疑似クラスはUAが文書のセマンティクスを使って判定する点です。

<body lang=fr>
  <p>Je suis français.</p>
</body>

注: ワイルドカードによる言語マッチングとカンマ区切りリストは、レベル4で新たに導入されました。

8. 位置疑似クラス

8.1. ハイパーリンク疑似クラス: :any-link

:any-link 疑似クラスは、ハイパーリンクのソースアンカーとして機能する要素を表します。 例えば、[HTML5]では、 a または area 要素で href 属性を持つものはハイパーリンクとなり、 よって :any-link に一致します。 これは、その要素が:link または :visitedいずれかに一致する場合に一致し、 :is(:link, :visited)と等価です。

8.2. リンク履歴疑似クラス: :link および :visited

ユーザーエージェントは、未訪問のハイパーリンクと 以前に訪問したリンクを、一般的に異なる見た目で表示します。 Selectorsは、これらを区別するために 疑似クラス:linkおよび :visitedを用意しています：

• :link 疑似クラスはまだ訪問していないリンクに適用されます。
• :visited 疑似クラスはリンクがユーザーによって訪問されたあとに適用されます。

この2つの状態は相互に排他的です。

一定期間後、 ユーザーエージェントは訪問済みリンクを （未訪問の）:link状態へ戻すこともあります。

:visited 疑似クラスは明らかなプライバシー懸念を伴います—— 他のどんなウェブサイトを訪問したか第三者に知られることが 様々な理由で問題となりえます—— このためユーザーエージェントは必ずユーザープライバシーを :visited実装で保護しなければなりません。

8.3. ターゲット疑似クラス: :target

一部の文書言語では、 文書のURLがフラグメントによって 文書内部の特定要素も指せるようになっています。 この方法で指される要素が文書のターゲット要素です。

:target 疑似クラスは文書のターゲット要素に一致します。 もし文書のURLにフラグメント識別子がなければ、ターゲット要素は存在しません。

p.note:target 

:target { color : red }
:target::before { content : url(target.png) }

注: 本仕様は過去に :target-within疑似クラスを定義していましたが、 現在は:focus-withinと同等の :has(:target)の利用を推奨し、 それで充分と考えています。

8.4. 参照要素疑似クラス: :scope

あるコンテキストでは、セレクターが1つ以上のスコープルート を基準にして照合される場合があります。 例えば querySelector() メソッドを [DOM] で呼ぶときなどが該当します。 :scope 疑似クラスはこのスコープルートを表します。 これは実際の要素の場合も、仮想的なもの（たとえば DocumentFragment など）もあります。

スコープルートが存在しない場合、 :scopeは その要素が属するツリーのルートを表します （:hostが シャドウツリー内の場合や、 それ以外なら:rootと同等です）。 本疑似クラスで木のルート要素ではなく特定要素に一致させたい場合は、 仕様がそれに合わせてスコープルートを定義する必要があります。

仮想スコーピングルートとは、 ドキュメントフラグメントのルートを表すオブジェクトのことであり、 セレクターパターン内で、他の要素とこのスコーピングルートとの関係性を表すために使うことができます。 これは、該当するドキュメントフラグメント内の全てのルート要素の親として機能します。 仮想スコーピングルートは特徴なしであり、セレクターの主語（主対象）になることはできません。

9. ユーザーアクション疑似クラス

インタラクティブなユーザーインターフェースでは、ユーザーの操作に応じて表示を変えることがあります。 Selectorsは、ユーザー操作を受けて対象となる要素を選択するための ユーザーアクション疑似クラスを複数提供しています。 （非インタラクティブなユーザーエージェントでは、これら疑似クラスは常に有効だが何にも一致しません。）

ユーザーアクション疑似クラスは互いに排他的ではありません。 ひとつの要素が、同時に複数のこのような疑似クラスにマッチすることがあります。

a:hover   /* リンク上にユーザーがホバー */
a:focus   /* リンクにフォーカス         */

a:focus:hover
/* フォーカス中かつホバーしているとき */

一部のユーザーアクション疑似クラスは、 対象要素自身だけでなくその祖先も一致対象とします： :hover、:active、:focus-withinなどです。 具体的には、これらがある要素と一致した場合は、その要素のフラットツリー祖先すべてについても一致し、 最初に見つかったトップレイヤー要素 またはルート要素まで適用されます（どちらか先に見つかった方まで）。

注: どのようなヒットテスト（ユーザ操作に反応する対象判定）が必要か、 具体的定義は現時点では未定義ですが、将来的に規定される予定です。

9.1. ポインターホバー疑似クラス: :hover

:hover 疑似クラスは、 ユーザーがポインティングデバイスで要素（または疑似要素）を指し示している間に適用されますが、 必ずしもその要素をアクティブ化するわけではありません。 例えば、視覚的ユーザーエージェントは、 カーソル（マウスポインター）が要素によって生成されたボックスの上に乗っているときにこの疑似クラスを適用できます。 ハードウェアの制限によりホバー状態を検出できない （例: ホバーを検出しないペンデバイスなど） インタラクティブなユーザーエージェントも依然として準拠しています。 そのようなUAでは、セレクターが単に決してマッチしないだけです。

要素の:hover一致は、フラットツリー内の 子孫（テキストノード等の非要素ノードも含む）のいずれかが 上記条件を満たしているときにも該当します。

ドキュメント言語は、要素が:hoverにマッチする追加の方法を定義している場合があります。 例えば、[HTML5]では、 ラベル付きコントロール要素が、そのラベルにホバーした場合に :hover にマッチする と定義されています。

注: :hover状態は 子要素がポインティングデバイスで指定されていることで 親にも適用されうるため、 実際にはポインティングデバイスの下にいない要素にも :hoverが 適用されるケースがあり得ます。

9.2. アクティベーション疑似クラス: :active

:active 疑似クラスは、 ユーザーによって要素が「アクティベート」されている間に 適用されます（具体的なアクティベートの定義はホスト言語による）； たとえばハイパーリンクがトリガーされている間などです。

加えて、:active疑似クラスは、 任意の要素（または疑似要素）の生成ボックスが ポインティングデバイスでアクティブ表示されている（押下状態等）間にも適用されます。 例: ユーザーが主ボタンを押した時から離すまで、 タッチスクリーンで指で押しているあいだ、など。

注: [HTML5]では HTML要素が アクティベートされるための条件が個別に定義されています。

要素の:active一致は、フラットツリー内の 子孫（テキストノード等の非要素ノードも含む）が上記状態になっている場合も一致します。

9.3. 入力フォーカス疑似クラス: :focus

:focus 疑似クラスは、 要素（または疑似要素）がフォーカスを持っている（キーボードや他の形式の入力を受け入れている）間に適用されます。

どの要素が:focusを獲得できるかについては、文書言語や実装ごとに制限がある場合があります。 たとえば、[HTML]では フォーカス可能領域 のリストが定義されています。

文書言語は:focusに一致させる追加条件を定めてもかまいませんが、 :focus疑似クラスが自動的に親要素へ伝播してはいけません。 親要素への一致を望む場合は:focus-withinを使ってください。 （他の仕組みにより伝播した場合は親要素にも適用されることはあり得ますが、 親であることだけが理由の場合は不可です。）

作者側から、フォームコントロールへの:focusを 関連付けられたlabel 要素に伝播させたいという要望がありますが、 主な反対理由は実装上の困難のようです。 CSSWG issue (CSS)や WHATWG issue (HTML)も参照してください。

9.4. フォーカス表示疑似クラス: :focus-visible

:focus 疑似クラスは常に現在フォーカス中の要素に一致しますが、 UA（ユーザーエージェント）は必ずしもフォーカスの視覚的指標（“フォーカスリング”を描画する等）を表示するとは限りません。 多様なヒューリスティックにより、ユーザーにとって最も有用な状況だけにフォーカスを可視化します。 :focus-visible 疑似クラスは、 これら状況でのみフォーカス中要素（または疑似要素）に一致します。 これにより、作者はフォーカス指標の外観を変更でき、その発生タイミングは変えずに済みます。

:root {
  --focus-gold: #ffbf47;
}

:focus-visible  {
  outline: 3px solid var(--focus-gold);
}

a:focus-visible {
  background-color: var(--focus-gold);
}

ユーザーエージェントはまた:focus-visibleを使ってデフォルトのフォーカススタイルを指定するべきです。 これにより:focus-visibleの利用者は デフォルトの:focusスタイルをわざわざ無効化する必要がなくなります。

9.5. フォーカスコンテナ疑似クラス: :focus-within

:focus-within 疑似クラスは、 :focus 疑似クラスが適用されるあらゆる要素（または疑似要素）に適用されます。 また、フラットツリー（テキストノードなど非要素ノードを含む）内の子孫が :focus にマッチする条件を満たす要素（または疑似要素）にも適用されます。

10. リソース状態疑似クラス

この節の疑似クラスは、読み込まれたリソース（特に画像や動画など）を表す要素に適用され、 その状態の特徴に基づいてセレクターで選択できるようにします。

10.1. メディア再生状態: :playing、:paused、 :seeking 疑似クラス

:playing 疑似クラスは、「再生」や「一時停止」ができる要素が「再生中」であることを表します。 （ここでの「再生中」には、要素が明示的に再生されている場合だけでなく、 一時的にユーザー意図と関係ない理由（例：バッファリングや停止状態）で止まっていても、 その理由が解消すれば自動的に再開する状態も含みます。）

:paused 疑似クラスは、「再生」や「一時停止」ができる要素が「一時停止中」（つまり再生中でない）であることを表します。 （これは明示的な「一時停止」状態だけでなく、 「読み込み済み・未アクティブ」など他の非再生状態も含まれます。）

:seeking 疑似クラスは、「シーク」（送り・戻しなど）ができる要素が「シーク中」であることを表します。 （HTMLの audio や video 要素についてはHTML § 4.8.11.9 シーク参照。)

10.2. メディアのロード状態: :buffering および :stalled 疑似クラス

:buffering 疑似クラスは、 「再生」や「一時停止」ができる要素が、 メディアデータ の取得を積極的に試みているが、まだ再生を再開するのに十分なデータを得ていないため、 再生を続けられない状態を表します。 （この状態でも要素は「再生中」とみなされます。 :buffering に一致する場合は、 必ず :playing にも 一致します。）

:stalled 疑似クラスは、 要素がメディアデータの取得を 積極的に試みているが、一定時間全くデータを受信できず、 再生を続けられない状態を表します。 HTMLの audio および video 要素の場合、 この「一定時間」は メディア要素のスタールタイムアウト です。[HTML]（ :buffering 疑似クラスと同様に、 この状態でも要素は「再生中」とみなされます。 :stalled に一致する場合は、 必ず :playing にも一致します。）

10.3. 音声状態: :muted および :volume-locked 疑似クラス

:muted 疑似クラスは、 音声を出すことができる要素が 現在「ミュート」（強制的に消音）の状態であることを表します。 （HTMLの audio や video 要素については、ミュートを参照。[HTML]）

:volume-locked 疑似クラスは、 音声を出すことができる要素で、 現在UAまたはユーザーによってボリュームが「ロック」されており、 ページ作者がそれを変更できない状態であることを表します。 （HTMLの audio や video 要素については、 要素の実効メディア音量設定アルゴリズムを参照。[HTML]）

11. 要素表示状態疑似クラス

11.1. 折りたたみ状態: :open 疑似クラス

:open 疑似クラスは、「開」「閉」双方の状態を持つ要素で、現在「開」状態にあるものを表します。

「開」「閉」が実際に何を意味するかはホスト言語に依存しますが、例として HTMLの details、 select、 dialog、 input などが挙げられます。 これらの要素は全て「開」状態に切り替わることで追加の内容（またはdialogの場合は任意の内容）を表示できます。

注: 「開」「閉」はセマンティックな状態です。 表示されていない要素 （例えば visibility: collapse や display: none サブツリーの要素など）でも、「開」状態にはなり得るため :openに一致します。

注: 将来的に:openがサポートされるものの全体が明らかになれば 「:closed」疑似クラスが追加される可能性もあります。

11.2. ポップオーバー状態: :popover-open 疑似クラス

:popover-open 疑似クラスは、 「popover-showing」と「popover-hidden」の両方の状態を持つ要素のうち、 現在「popover-showing」状態にあるものを表します。

注: これは :open とは別物です。 なぜなら、要素ごとに固有の open/closed 状態とは別に、 ポップオーバーであることに関連して 個別の popover-showing/popover-hidden 状態を持つからです。

「popover-showing」や「popover-hidden」の意味は ホスト言語に依存しますが、 例えばHTMLの popover 属性や、 関連するポップオーバー可視状態 の存在などが該当例となります。

11.3. モーダル（排他的インタラクション）状態: :modal 疑似クラス

:modal 疑似クラスは、要素が「他の要素とのインタラクションを遮断している」状態、 つまり自分が閉じられるまで外部要素との操作ができない排他的状態にあることを表します。 :modal は複数の要素に同時に適用されることがありますが、 そのうち一つだけが「アクティブ」（入力を受け付ける）状態になります。

11.4. 全画面表示状態: :fullscreen 疑似クラス

:fullscreen 疑似クラスは、 画面のほぼ全体（通常は全体）を占めるモードで表示されている要素 （Fullscreen APIによって定義されるような状態）を表します。[FULLSCREEN]

11.5. ピクチャーインピクチャー表示状態: :picture-in-picture 疑似クラス

:picture-in-picture 疑似クラスは、 ビューポートのほぼ全体（通常は全体）を占めつつも 表示領域が画面の一部に限定され、 他のコンテンツ上にオーバーレイ表示されている状態の要素を表します。 例えばPicture-in-Picture APIを用いた場合です。[picture-in-picture]

12. 入力用疑似クラス

この節の疑似クラスは主にユーザーからの入力を受け付ける要素 （HTMLの input 要素など）に適用されます。

12.1. 入力コントロール状態

12.1.1. :enabled および :disabled 疑似クラス

:enabled 疑似クラスは、 有効状態にあるユーザーインターフェース要素を表します。 こうした要素には必ず対応する無効状態が存在する必要があります。

逆に、:disabled 疑似クラスは 無効状態にあるユーザーインターフェース要素を表します。 このような要素には必ず対応する有効状態が存在します。

有効状態・無効状態・ユーザーインターフェース要素が何かはホスト言語依存です。一般的な文書では多くの要素が :enabled でも :disabled でもありません。 たとえば[HTML5]では、 非disabledなインタラクティブ要素は :enabled、 そのうち 明示的にdisabledのものは :disabledと定義されます。

注: ユーザーが当該ユーザーインターフェース要素とやりとりできるかどうかに 影響するCSSプロパティであっても、 それにより:enabledや :disabledへの一致が変化することはありません。 例えばdisplayや visibility プロパティは要素の有効/無効状態に影響しません。

12.1.2. 変更可否疑似クラス: :read-only および :read-write

要素が文書言語の定義によってユーザーにより編集可能な場合、:read-writeに一致します。 それ以外は:read-onlyです。

たとえば、[HTML5]では、 非disabledかつ非readonlyな <input>要素は:read-writeとなり、 contenteditable属性がtrue状態にある要素も同様です。

12.1.3. プレースホルダー表示疑似クラス: :placeholder-shown

入力要素は、ユーザーが何を入力すればよいかのヒントとして プレースホルダー（補助テキスト）を表示する場合があります。 例としては[HTML5]のplaceholder 属性などが挙げられます。 :placeholder-shown疑似クラスは、 このようなプレースホルダーテキストが 属性や実要素、またはUAによって暗黙的に表示されているinput要素に一致します。

12.1.4. 自動入力疑似クラス: :autofill

:autofill疑似クラスは、 ユーザーエージェントによって自動的に入力値が補完された かつまだユーザーによって変更されていないinput要素に適用されます。

12.1.5. デフォルト選択疑似クラス: :default

:default 疑似クラスは、 一連の同種UI要素群でデフォルトとなる1つまたは複数の要素に適用されます。 一般的にはコンテキストメニューアイテム、ボタン、選択リスト/メニューなどが該当します。

例としては、一群のボタン中でのデフォルト送信ボタンや、 ポップアップメニューでのデフォルトオプションなどです。 複数選択が可能なグループ（ピザのトッピング等）では 複数要素が:defaultとなることもあります。 例えば[HTML5]では :defaultは フォーム内「既定ボタン」や <select>内の初期選択<option>要素、 その他要素に一致すると定義されています。

12.2. 入力値の状態

12.2.1. 選択状態疑似クラス: :checked、 :unchecked、:indeterminate

ラジオボタンやチェックボックスはユーザー操作で「オン・オフ」切り替えができます。 一部のメニューアイテムも選択時は「チェック」状態となります。 この状態は入力値疑似クラスによって示されます。

このような要素が「オン」状態の場合、 :checked 疑似クラスが適用されます。 例えば[HTML5]では チェック済みチェックボックス、 ラジオボタン、選択済み<option>要素が :checkedに一致します。 同様に、このような要素が「オフ」状態なら :unchecked 疑似クラスが適用されます。

:checkedや:uncheckedに一致しうる要素で 「オン」「オフ」いずれでもない場合は、 :indeterminate疑似クラスが適用されます。 :indeterminateは そもそも「チェック」概念がないが値が不定な状態（例：進捗率不明のプログレスバー）にも一致します。

これら３つの疑似クラスは互いに排他的です。 １つの要素は、同時に最大で１つだけマッチします。 （そして、「checked」の概念が該当しない場合は、どれにもマッチしないこともあります。） もしホスト言語で「不定（indeterminate）」の概念が 「checked/unchecked」の概念と排他的でない場合 （たとえば、HTMLのチェックボックスでは、「indeterminate」状態と「checked」状態のブール値は別々です）、 これらの疑似クラスのマッチ判定目的においては、 indeterminate（不定）であることが checked/unchecked よりも優先されます。

入力値疑似クラスは動的でユーザー操作で切り替え可能ですが、 selectedやcheckedなど文書中のセマンティック属性にも基づきうるため すべてのメディアで適用されます。

12.3. 入力値バリデーション

12.3.1. 妥当性疑似クラス: :validおよび:invalid

要素が、その内容や値について 文書言語で定義されたデータ妥当性セマンティクス（例：[XFORMS11]や[HTML5]） に照らして妥当・不正であるとき、それぞれ:validまたは:invalidに一致します。 データ妥当性セマンティクスを持たない要素は :validにも:invalidにも一致しません。

注: 制約がないため:validとなる要素と そもそもデータ妥当性セマンティクスを持たないため :validにも:invalidにもならない要素 は区別されます。 たとえばHTMLでは<input type="text">は制約がなければ常に:validですが p要素は妥当性セマンティクス自体を持たず どちらの疑似クラスにも一致しません。

12.3.2. 範囲疑似クラス: :in-rangeおよび:out-of-range

:in-range および:out-of-range疑似クラスは、 範囲制限を持つ要素だけに適用されます。 要素が文書言語で定義された範囲制限に照らして 値が範囲内なら:in-range、 範囲外なら:out-of-range になります。 範囲制限を持たない要素やフォームコントロール以外の要素は :in-rangeにも :out-of-rangeにもなりません。 例：1〜10の範囲制限のスライダーで値11なら:out-of-range。 他にも「A」「B」「C」だけのポップアップメニューで値「E」となる場合も同様です。

12.3.3. 必須/任意疑似クラス: :requiredおよび:optional

フォーム要素は、フォームの有効な送信のために値がそれぞれ必須である場合は :required、 任意でよい場合は :optionalとなります。 フォーム要素でないものは、requiredでもoptionalでもありません。

12.3.4. ユーザーインタラクション疑似クラス: :user-valid および :user-invalid

:user-invalid および :user-valid 疑似クラスは、 それぞれ誤った入力または正しい入力を持つ要素を表しますが、 いずれもユーザーが十分にその要素と対話した後にのみ適用されます。 これらの疑似クラスは、ユーザーが自分の入力ミスに気付きやすくするためのものです。

これら疑似クラスは、少なくともユーザーがフォーム送信を試みた後で かつ再度入力要素に操作を行うかフォームをリセットするまで、 対象の要素に一致しなければなりません。 また、ユーザーへエラーを強調表示するため 他のタイミングでも一致させても構いません。 たとえば:user-invalidは、 ユーザーが値を変更してフォーカスを別の要素に移した時点で :invalidな input要素に一致し始めたり、 入力が修正されて正しくなった場合のみ一致しなくなったりします。

ホスト言語がより正確な一致ルールを定義してもよく、 またはプラットフォーム慣習に任せても構いません。 それ以外の場合、具体的挙動はUA依存です。 いずれにせよ、 :user-invalid疑似クラスは :invalidな 要素だけに一致しなければならず、 :user-valid疑似クラスは :validな 要素だけに一致しなければなりません。 HTMLの要素についてはHTML仕様に具体的な規則があります。[HTML]

<form>
  <label>
    Volume:
    <input name='vol' type=number min=0 max=10 value=11>
  </label>
  ...
</form>

13. 木構造疑似クラス

Selectorsは、構造疑似クラスという概念を導入し、 文書ツリー内に存在するが他の単純セレクターやコンビネーターでは表現できない追加情報に基づいて要素を選択できるようにしています。

単独のテキストノードやその他の非要素ノードは、親要素の子リスト内で要素の位置を計算するときにカウントされません。親の子リスト内における要素の位置を計算する際、インデックス番号は1から始まります。

構造疑似クラスは文書ツリー内の要素にのみ適用されます。 疑似要素には決して一致しません。

13.1. :root 疑似クラス

:root 疑似クラスは、文書のルート要素であることを表します。

例えば、DOM文書では :root 疑似クラスは文書要素に一致します。 HTMLでは、これは html 要素になります （ただしスクリプト等による文書の改変がない場合）。

13.2. :empty 疑似クラス

:empty 疑似クラスは、 子ノードを全く持たない要素 （ただし、文書の空白文字のみは例外として許容される場合がある） を表します。 文書ツリーの観点では、 「要素ノード」および「内容ノード」 （[DOM] のテキストノードやエンティティリファレンス等） のうち、長さが0でないデータを持つものだけが空要素判定に影響します。 コメントや処理命令、その他のノードは 要素のemptyかどうかの判定には影響しません。

<p></p>
<p>
<p> </p>
<p> <!-- comment --></p>

<div>text</div>
<div><p></p></div>
<div>&nbsp;</div>
<div><p>bla</p></div>
<div>this is not <p>:empty</p></div>

注: SelectorsのLevel 2およびLevel 3では、 :emptyは 空白のみを含む要素には一致しませんでした。 これは改訂されました。なぜなら、HTMLでは空白は大部分が収縮されて表示上無視されてしまい ソース整形などの目的で使われるため、 特に終了タグ省略時には その空白がDOMテキストノードとして吸収されやすいからです。 これによって著者が「空」とみなす要素も 期待通りこのセレクターで選択できるようになりました。

13.3. 子インデックス系疑似クラス

この節で定義されている疑似クラスは、 要素が包括的な兄弟の中での インデックスに基づいて要素を選択します。

注: Selectors 3では、 これらのセレクターは親の子リストにおけるインデックスで 要素を選択すると記述されていました。 （この説明は本節の名前や、いくつかの疑似クラス名にも残っています。） しかし、親がいない要素や非要素ノードを親に持つ場合を除外する理由がなかったため、 「兄弟間での相対的インデックス」を指すよう表現が修正されています。

13.3.1. :nth-child() 疑似クラス

:nth-child(An+B [of S]? ) 疑似クラス記法は、 S というセレクターリスト （<complex-real-selector-list>）に一致する 包括的兄弟のリストの中で、 An+B番目の要素にあたるものを表します。 Sを省略した場合、デフォルトは*|*です。

An+B記法とその解釈は CSS Syntax 3 § 6 The An+B microsyntax で定義されており、任意の非負整数nに対して インデックスi = An + Bを表します。

注: ここでいう要素リストのインデックスは1始まりです。 つまり、最初の子要素はインデックス1を持ち、 :nth-child(2n+1)に一致します（n=0のとき1になるため）。

たとえば、このセレクターはテーブルの各偶数行を選択したり、 パラグラフ毎に4つずつ色を変えたりするサイクル指定にも使えます。

:nth-child(even)   /* 2番目、4番目、6番目…などを表す
:nth-child(10n-1)  /* 9番目、19番目、29番目…などを表す */
:nth-child(10n+9)  /* 同じ */
:nth-child(10n+-1) /* 構文的に無効で、無視される */

注: :nth-child() 疑似クラスの詳細度（specificity）は、 通常の疑似クラス1つ分に加え、 Sが指定された場合は S内の最も詳細度の高い複合セレクターの詳細度分が加算されます。 詳細は§ 15 セレクターの詳細度計算参照。 よってS:nth-child(An+B)と :nth-child(An+B of S)は 詳細度は完全に同じですが、挙動には違いがあります（下記例参照）。

:nth-child(-n+3 of li.important)

li.important:nth-child(-n+3)

tr {
  background: white;
}
tr:nth-child(even) {
  background: silver;
}

tr {
  background: white;
}
tr:nth-child(even of :not([hidden])) {
  background: silver;
}

13.3.2. :nth-last-child() 疑似クラス

:nth-last-child(An+B [of S]? ) 疑似クラス記法は、 Sというセレクターリスト （<complex-real-selector-list>）に一致する 包括的兄弟のリストの末尾から数えて An+B番目の要素を表します。 Sを省略した場合、デフォルトは*|*です。

注: :nth-last-child()疑似クラスの詳細度も :nth-child()同様、 通常の疑似クラス＋そのセレクター引数Sの詳細度の合計です。 詳細は§ 15 セレクターの詳細度計算参照。

CSS Syntax Module [CSS3SYN]で An+B記法が定義されています。

tr:nth-last-child(-n+2)    /* HTMLテーブルの最後の2行 */

foo:nth-last-child(odd)    /* 親要素内で後ろから数えて奇数番目のfoo要素すべて */

13.3.3. :first-child 疑似クラス

:first-child 疑似クラスは、 自身の包括的兄弟の中で最初の要素にあたるものを表します。 :nth-child(1)と同じ意味です。

div > p:first-child

<p> The last P before the note.</p>
<div class="note">
   <p> The first P inside the note.</p>
</div>

<p> The last P before the note.</p>
<div class="note">
   <h2> Note </h2>
   <p> The first P inside the note.</p>
</div>

* > a:first-child /* どんな要素の最初の子のa */
a:first-child /* 同じ（aがルート要素でなければ） */

13.3.4. :last-child 疑似クラス

:last-child 疑似クラスは、 自身の包括的兄弟の中で最後の要素であるものを表します。 :nth-last-child(1)と同義です。

ol > li:last-child

13.3.5. :only-child 疑似クラス

:only-child 疑似クラスは、 兄弟を持たない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1)と同義ですが、詳細度はより低くなります。

13.4. 型指定子インデックス疑似クラス

この節の疑似クラスは子インデックス疑似クラスに似ていますが、兄弟リスト内で自身と同じ型（タグ名）の要素の中でのインデックスに基づいて判定されます。

13.4.1. :nth-of-type() 疑似クラス

:nth-of-type(An+B) 疑似クラス記法は、 :nth-child(|An+B| of S)に一致する要素と同じものを表します。 ここでSは当該要素に一致する型セレクター および名前空間プレフィックスです。 たとえば、 HTMLの img 要素がこの疑似クラスに一致するかどうかを判定する場合、 検討中のSはhtml|imgとなります（適切なhtml名前空間が宣言された場合）。

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

注: 要素の型が事前にわかっていれば、この疑似クラスは:nth-child()と型セレクターの組み合わせと同等です。 すなわち、img:nth-of-type(2) は *:nth-child(2 of img) と同等です。

13.4.2. :nth-last-of-type() 疑似クラス

:nth-last-of-type(An+B) 疑似クラス記法は、 :nth-last-child(|An+B| of S)に一致するのと同じ要素を表します。 ここでSは、該当する要素に一致する型セレクター および名前空間プレフィックスです。 たとえば、 HTMLの img 要素がこの疑似クラスに一致するかどうかを判定する際、 検討すべきSはhtml|imgとなります（適切なhtml名前空間が宣言されていると仮定）。

body > h2:nth-of-type(n+2):nth-last-of-type(n+2) 

body > h2:not(:first-of-type):not(:last-of-type) 

13.4.3. :first-of-type 疑似クラス

:first-of-type 疑似クラスは、 :nth-of-type(1)と同じ要素を表します。

dl dt:first-of-type

<dl>
  <dt>gigogne</dt>
  <dd>
    <dl>
      <dt>fusée</dt>
      <dd>multistage rocket</dd>
      <dt>table</dt>
      <dd>nest of tables</dd>
    </dl>
  </dd>
</dl>

13.4.4. :last-of-type 疑似クラス

:last-of-type 疑似クラスは、 :nth-last-of-type(1)と同じ要素を表します。

tr > td:last-of-type

13.4.5. :only-of-type 疑似クラス

:only-of-type 疑似クラスは、 :first-of-type:last-of-type と同じ要素を表します。

14. コンビネーター

14.1. 子孫コンビネーター ( )

時には、著者が「ある要素の子孫である要素」をセレクターで記述したい場合があります（例：「em 要素が H1 要素内に含まれる場合」など）。 子孫コンビネーターはこのような関係を表現します。

子孫コンビネーターは、2つの複合セレクターの間に入る空白です。

A B のようなセレクターは、任意の先祖要素Aの子孫であるB要素を表します。

h1 em

<h1>This <span class="myclass">headline
is <em>very</em> important</span></h1>

div * p

div p *[href]

14.2. 子コンビネーター (>)

子コンビネーター は、2つの要素間の親子関係を表します。子コンビネーターは 「大なり記号」（U+003E、>）コードポイントで構成され、 2つの複合セレクターを区切ります。

body > p

div ol>li p

要素の最初の子を選択する方法については、上記:first-child疑似クラスの節を参照してください。

14.3. 隣接兄弟コンビネーター (+)

次兄弟結合子は、“プラス記号” (U+002B、+) のコードポイントで構成され、2つの複合セレクターを区切ります。 これら2つの複合セレクターで表される要素は、ドキュメントツリー内で同じ親を持ち、 先に記述された複合セレクターで表される要素は、後に記述されたものの直前に位置します。 （要素間のテキストノードなど）非要素ノードは、要素の隣接関係を判定する際には無視されます。

math + p

h1.opener + h2

14.4. 後続兄弟コンビネーター (~)

後続兄弟コンビネーターは「チルダ」 （U+007E、~） コードポイントで表現され、 2つの複合セレクターを区切ります。 両者で表現される要素は文書ツリーで同じ親を持ち、 1つ目の複合セレクターが表す要素より後で 2つ目の複合セレクターが表す要素が（直後でなくとも）現れます。

h1 ~ pre

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

15. セレクターの詳細度の計算

セレクターの詳細度（specificity）は 指定された要素に対して次の手順で計算します：

• セレクター内のIDセレクター数を数える（＝A）
• セレクター内のクラスセレクター・属性セレクター・疑似クラスの数を数える（＝B）
• セレクター内の型セレクターと疑似要素の数を数える（＝C）
• ユニバーサルセレクター（*）は無視する

セレクターがセレクターリストの場合は リスト内の各セレクターごとにこの数を計算します。 当該リストに対するマッチング時には、 一致した中で最も詳細度の高いセレクターの値が有効になります。

一部の疑似クラスは他セレクターのための「評価コンテキスト」を提供し、 次のように特別な詳細度を定義します：

• :is()、 :not()、 :has()の詳細度は、 引数となるセレクターリスト内で 最も詳細度の高い複合セレクターの詳細度になります。
• 同様に、:nth-child()や :nth-last-child()は 疑似クラス自体1個分の詳細度に加え、引数のセレクターリスト内で 最も詳細度の高い複合セレクター分が加算されます。
• :where()疑似クラスの詳細度は0とします。

詳細度の比較は3つの構成要素を順番に比較します： A値が大きければそちらがより詳細度高、 Aが同じならB値が大きい方がより詳細度高、 Bも同じならC値が大きい方が詳細度高、 全て同じなら同等とされます。

実装によるストレージ制限などにより、 A・B・Cに上限があることがあります。 その場合は上限を越えた値は上限値で固定され、オーバーフローしません。

*               /* a=0 b=0 c=0 */
LI              /* a=0 b=0 c=1 */
UL LI           /* a=0 b=0 c=2 */
UL OL+LI        /* a=0 b=0 c=3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 */
UL OL LI.red    /* a=0 b=1 c=3 */
LI.red.level    /* a=0 b=2 c=1 */
#x34y           /* a=1 b=0 c=0 */
#s12:not(FOO)   /* a=1 b=0 c=1 */
.foo :is(.bar, #baz)
                /* a=1 b=1 c=0 */

注: 同じ単純セレクターの繰り返しは可能で、それだけ詳細度も上がります。

注: HTMLのstyle属性で指定したスタイルの詳細度は CSS Style Attributesで説明されています。 [CSSSTYLEATTR]

16. 文法

セレクターは、以下の文法に従って構文解析されます。

<selector-list> = <complex-selector-list>

<complex-selector-list> = <complex-selector>#
<complex-real-selector-list> = <complex-real-selector>#

<compound-selector-list> = <compound-selector>#

<simple-selector-list> = <simple-selector>#

<relative-selector-list> = <relative-selector>#
<relative-real-selector-list> = <relative-real-selector>#


<complex-selector> = <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*
<complex-selector-unit> = [ <compound-selector>? <pseudo-compound-selector>* ]!
<complex-real-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

<relative-selector> = <combinator>? <complex-selector>
<relative-real-selector> = <combinator>? <complex-real-selector>

<compound-selector> = [ <type-selector>? <subclass-selector>* ]!
<pseudo-compound-selector> =  <pseudo-element-selector> <pseudo-class-selector>*

<simple-selector> = <type-selector> | <subclass-selector>


<combinator> = '>' | '+' | '~' | [ '|' '|' ]

<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? '|'

<type-selector> = <wq-name> | <ns-prefix>? '*'

<subclass-selector> = <id-selector> | <class-selector> |
                      <attribute-selector> | <pseudo-class-selector>

<id-selector> = <hash-token>

<class-selector> = '.' <ident-token>

<attribute-selector> = '[' <wq-name> ']' |
    '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
<attr-matcher> = [ '~' | '|' | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

<pseudo-class-selector> = : <ident-token> |
                          : <function-token> <any-value> )

<pseudo-element-selector> = : <pseudo-class-selector> | <legacy-pseudo-element-selector>
<legacy-pseudo-element-selector> =  : [before | after | first-line | first-letter]

上記の文法を解釈する際、 次の規則が適用されます：

• 空白は禁止されています：

  • <compound-selector> または <complex-selector-unit> のトップレベル構成要素のいずれか同士の間 （つまり、<type-selector> と <subclass-selector> の間、 または <pseudo-element-selector> と <pseudo-class-selector> の間、 など）

  • <type-selector> や <class-selector> の いずれかの構成要素同士の間

  • 疑似要素あるいは疑似クラスの:同士、または:と <ident-token> や <function-token> の間の空白も禁止されます。 （該当するのは <pseudo-element-selector> や <pseudo-class-selector> の場合です。）

  • <wq-name> の すべての構成要素同士の間

  • <attr-matcher> の構成要素同士の間

  • <compound-selector> や <pseudo-compound-selector> が <complex-selector-unit> 内で連なる場合の間

  • <combinator> の構成要素同士の間

  2つの <complex-selector-unit> の間に <combinator> が省略されている場合、 その間には空白が必須です。 （これは子孫コンビネーターが使われていることを示します。）

• <id-selector> においては、 <hash-token> の値は 識別子 でなければなりません。
• <pseudo-class-selector> の生成規則は <legacy-pseudo-element-selector> の生成規則を含みません。 （つまり、:before 等は疑似クラスとして決してパースされてはならず、 たとえば後続する他の単純セレクターによってセレクターが有効になってしまう場合でも同様です。）

注: セレクターはさらにさまざまなより具体的な構文上の制約を受けます。 上記の文法に従うことは必要だが十分条件ではありません。 セレクターの解析に関する追加の規則については § 3.9 無効なセレクターとエラー処理 を参照してください。

注: 一般的に、 <pseudo-element-selector> は、 <complex-selector> 内の 最後の <compound-selector> の 末尾に置かれている場合のみ有効です。 しかしながら、状況によっては、その後にさらなる<pseudo-element-selector>や、 <pseudo-class-selector> が続くこともあります。 ただし、これらはケースバイケースで定義されています。 （例えば、ユーザーアクション疑似クラスは どの疑似要素の後にも許可されていますし、 ツリー対応疑似要素は ::slotted() 疑似要素の後に許可されています。）

Level 2 の 4 つの 疑似要素 （::before、 ::after、 ::first-line、 および ::first-letter） は互換性のため、先頭のコロンを1つだけにして書くことが許可されています。 これにより、それらが <pseudo-class-selector> に似て見えることがあります。

16.1. <forgiving-selector-list> と <forgiving-relative-selector-list>

レガシーの理由から、 セレクターリストの一般的な振る舞いは、 リスト内のいずれかのセレクターの解析に失敗すると （例えば新しい機能や UA 固有のセレクター構文が使われている場合など）、 セレクターリスト全体が無効になるというものです。 これにより、新しいセレクターを使った CSS を古いユーザーエージェントでも安全に記述することが困難になります。

<forgiving-selector-list> の生成規則は、 リスト内の各セレクターを個別に解析し、 解析に失敗したものだけを無視して残りを使用できるようにする、というものです。

注: スタイルルールでは引き続き通常の厳格な セレクターリストの挙動が使われます。<forgiving-selector-list> は :is() と :where() のみで使われます。 対応する適用範囲は詳細度にわずかな影響を与えますが、 スタイルルールのセレクターを :is() でラップすると、 疑似要素を含まない限り、そのセレクターは寛容（forgiving）になります（:is() や :where() の中では疑似要素は無効です）。

構文的には、<forgiving-selector-list> は <any-value>? と等価です。 実際の値は 寛容なセレクターリストとして解析して得られます。

<forgiving-selector-list> 内のいかなる項目も、 無効（未知のセレクターや構文を使っている場合や、文脈上無効である場合など）であれば、 その項目の詳細度は 0 と扱われなければなりません。

注: <forgiving-selector-list> は意図的に :is() と :where() のみに使用され、 セレクター引数を取る他の疑似クラスでは使用されません。

17. API フック

Selectors の概念を用いる仕様を書きやすくするために、 この節では他の仕様から呼び出せるいくつかの API フックを定義します。

これらは、 match や invalid selector のより厳密な定義が得られた現在でも 依然として必要でしょうか？ 名詞の方が述語より仕様間で調整しやすく、 また querySelector から返される要素順のような細かい点は Selectors より DOM 仕様に定義させる方が理にかなっているように思えます。

17.1. セレクターを解析する (Parse A Selector)

この節では、文字列 source から セレクターを解析する 方法を定義します。 戻り値は複合セレクターリストか、失敗です。

1. Let selector be the result of parsing source as a <selector-list>. If this returns failure, it’s an invalid selector; return failure.
2. If selector is an invalid selector for any other reason (such as, for example, containing an undeclared namespace prefix), return failure.
3. Otherwise, return selector.

17.2. 相対セレクターを解析する (Parse A Relative Selector)

この節では、文字列 source から 相対セレクターを解析する 方法を定義します。 戻り値は複合セレクターリストか、失敗です。

1. Let selector be the result of parsing source as a <relative-selector-list>. If this returns failure, it’s an invalid selector; return failure.
2. If selector is an invalid selector for any other reason (such as, for example, containing an undeclared namespace prefix), return failure.
3. Otherwise, return selector.

17.3. 要素に対してセレクターを照合する (Match a Selector Against an Element)

この節では、要素に対してセレクターを照合する 方法を定義します。

このアルゴリズムを使う API は selector と element を提供する必要があります。

呼び出し側はオプションで以下を提供できます：

• 1つ以上の スコーピングルート、 これにより :scope 疑似クラスの解決が可能になります。

このアルゴリズムは success または failure を返します。

与えられた selector の各 複合セレクター（これは 複合セレクターのリスト と見なされます）について、 次の段落で説明するようにその複合セレクターを element に対して照合します。 もし任意の複合セレクターで照合が成功すればその時点でアルゴリズムは success を返し、 どれも成功しなければ failure を返します。

複合セレクターを要素に照合する ためには、 右から左へ1つずつ 複合セレクター を処理します。 この処理は再帰的に次のように定義されます：

• 右端の複合セレクター内の任意の単純セレクターが要素に一致しなければ、failure を返す。
• そうでなく、複合セレクターが1つしかなければ、success を返す。
• そうでなければ、右端の コンビネーター によってこの要素と関係しうる すべての可能な要素を考慮する。 これらの要素のいずれかに対して、右端の複合セレクターと右端のコンビネーターを削った残りのセレクターを照合した結果が success であれば success を返す。 さもなければ failure を返す。

17.4. 疑似要素に対してセレクターを照合する (Match a Selector Against a Pseudo-element)

この節では、疑似要素に対してセレクターを照合する 方法を定義します。

このアルゴリズムを使う API は selector と pseudo-element を提供する必要があります。 また前節の要素照合に渡せる同じオプション類を任意で与えることができます。

このアルゴリズムは success または failure を返します。

与えられた selector の各 複合セレクター について、 もし次の両方が成立するなら：

• 複合セレクターの右端の 単純セレクター が pseudo-element に一致し、かつ
• 右端の単純セレクターを取り除いた残りの複合セレクターについて 複合セレクターを要素に照合する を、 pseudo-element に対応する要素と与えられた任意のパラメータで実行した結果が success になる、

それ以外の場合（つまり、selector 中のどの複合セレクターに対しても上の条件が成り立たない場合）は、 failure を返します。

17.5. ツリーに対してセレクターを照合する (Match a Selector Against a Tree)

この節では、ツリーに対してセレクターを照合する 方法を定義します。

このアルゴリズムを使う API はセレクターと、 セレクターが検索する サブツリー を示す1つ以上の root elements を提供する必要があります。 すべての root elements は同じ ルート を共有していなければなりません。そうでない場合、このアルゴリズムの呼び出しは無効です。

オプションで以下を提供できます：

• 1つ以上のスコーピングルート。これはセレクターがスコープされていることを示します。
• マッチリストに表示されることを許容する疑似要素のリスト。 指定されていない場合、すべての疑似要素が許可されたものと見なされます。

  実際にこのように取り扱われるのは、ツリー対応疑似要素だけです。

このアルゴリズムは（空の場合もある）要素の一覧を返します。

1. まず candidate elements の一覧を作ります。これは root elements とそのすべての子孫要素で、 特に指定がない限り シャドウを含むツリー順（shadow-including tree order） で整列します。
2. もし スコーピングルート が提供されていれば、 candidate elements から、少なくとも1つのスコーピングルートの子孫でない要素を削除します。
3. selector match list を空に初期化します。
4. candidate elements の各 element について：
   1. もし 要素に対してセレクターを照合する の結果が success であれば、 element を selector match list に追加します。
   2. element に関連づけられる可能性のある各疑似要素で、マッチリストに現れてよい疑似要素であれば、 その疑似要素に対して 疑似要素に対してセレクターを照合する を実行し、 結果が success であればその疑似要素を selector match list に追加します。

      疑似要素の selector match list 内での相対的な位置づけは未定義です。 現時点ではこれを公開する文脈はまだありませんが、いつか何かを公開する前に決める必要があります。

付録 A: ソース文書とデータを要素ツリーにマッピングするためのガイダンス

この節は参考情報です。

DOM が記述する要素ツリー構造は強力で有用ですが、 木構造データ（あるいは適切に解釈すればグラフ構造）を表現するほぼすべての言語をモデル化できるほど汎用的です。

HTML のように、ある言語はリソースから DOM オブジェクトを生成する明確な手順を既に持っています。 もし与えられた言語がそのような手順を持たない場合、 Selectors をその言語の文書に適用するにはその手順を定義する必要があります。

最低限、文書言語は DOM の「要素」に対応するものが何であるかを定義する必要があります。

ノード間の主要な一対多の関係（木構造なら親/子、グラフ構造なら要素/隣接要素など）は、 要素の子ノードとして反映されるべきです。

要素のその他の特性は DOM の同様の特性と同等の目的を果たす何かにマップされるべきです：

type

文書言語の要素がグループを区別するための「型」を持つならば、 それは "type" 特性として反映されるべきです。

もしこの "type" が「基本名」とそれを高次のグループにまとめる「名前空間」に分けられるなら、 後者は "namespace" 特性として反映されるべきです。 そうでなければ、その要素は "namespace" 特性を持つべきではなく、 全体の名前が "type" 特性として反映されるべきです。

id

文書内で一意の識別子として機能する何らかの側面があるならば、 それは "id" 特性にマップされるべきです。

注: HTML は各要素が単一の ID を持つことを許可しますが、 これは一般的制限とみなすべきではありません。 ID の重要な性質は各 ID が単一の要素に結び付くことであり、 単一の要素が複数の ID を持つことは有効です。

classes and attributes

要素を識別するのに有用であるが文書内で一意ではない側面は、 "class" または "attribute" 特性にマップされるべきです（ラベルのような単独の文字列なら class、名前/値の対のようなものなら attribute）。

pseudo-classes and pseudo-elements

もし要素が疑似クラスに一致したり疑似要素を持つならば、 それは明示的に定義されなければなりません。

一部の疑似クラスは構文的なもので、 例えば :has() や :is() のように常に動作すべきものがあります。 その点をどこかに示す必要があります。 構造的な疑似は子リストが順序付けられている限り常に動作するだろうと考えられます。

付録 B: Web 互換性のために必要だが廃止予定の -webkit- パースのクワーク

この付録は規範的です。

レガシーな Web 互換性の制約のために、 Web 文書をパースすることを期待されるユーザーエージェントは次の機能をサポートしなければなりません：

• :-webkit-autofill は legacy selector alias として扱われ、 :autofill の別名として解釈されなければなりません。

• 名前が文字列 "-webkit-" で始まる（ASCII 大文字小文字を無視して一致）その他のすべての pseudo-elements（機能記法ではないもの）は、 パース時に有効であると扱われなければなりません。 （つまり ::-webkit-asdf はパース時に有効ですが、 ::-webkit-jkl() は有効ではありません。） それらが他に認識・サポートされない場合は、何にも一致しないものとして扱われ、 unknown -webkit- pseudo-elements とされなければなりません。

  Unknown -webkit- pseudo-elements は ASCII 小文字でシリアライズされなければなりません。

  このクワークは何についてのものですか？

  Selectors には長らく単一の未知／無効なセレクターが セレクターリスト全体を無効化してしまう（それが属する1つの複合セレクターだけでなく） 挙動がありました。 これはワーキンググループから見て一般にはレガシーなミスと考えられていますが、 多くのスタイルシートが意図的にせよそうでないにせよこの挙動に依存しているため、 今更直せないという事情があります。

  この一面として、ベンダー固有セレクターの使用は それを認識しない他のユーザーエージェントではセレクター全体を無効化し、 そのスタイルルール全体を無効にしてしまいます。 過去にはこれを利用して—強く推奨されない手法ではありますが—一部のブラウザからスタイルルールを隠すために 意図的に使われたこともありましたし、 また意図せずに、ある要素にスタイルを適用すると同時に そのベンダー固有の疑似要素（たとえば一部のブラウザが公開する input 関連の疑似）にも同じスタイルを適用してしまい、 他ブラウザからそのルール全体を隠してしまうこともありました。

  この一般的な理由に加えて、 WebKit 派生のユーザーエージェント（Safari や Chrome など）はベンダープレフィックス付き疑似要素に関して 追加のクワークを持っており、::-webkit- プレフィックスのついたセレクターは パース時に有効と見なされます。 （これはおそらく、著者が独自の疑似要素を定義できる将来の機能を見越して、 当時のある CSS 機能が「可能な疑似要素をすべてパース時に有効と扱う」ようにしていた名残だと考えられます。）

  他のレガシークワーク（[QUIRKS] に記載されているようなもの）と同様に、 このベンダー固有の特殊扱いは一般的になりすぎており、 それに依存しているサイトが壊れることが他の UA においても発生しているため、 実際的な意味でこのクワークが現代の Web を正しくレンダリングするために 必須であると見なされるに至っています。 したがって、このクワークを仕様化し全ユーザーエージェントに要求することで、 今日のウェブページが現在および将来のユーザーエージェントで正しく表示される可能性を高めます。

  ただしクワークに関していつもそうであるように、 意図的にこれに依存するウェブページは CSSWG のメンバーや健全な思考を持つウェブ開発者から 非難されるでしょう。

付録 C: プライバシー保護を考慮した :visited 制限の例

:visited におけるユーザープライバシー保護の以前の試みは、 リンクが :visited に一致するか :link に一致するかを 「偽装」するための複雑な制約と挙動を伴い、 悪意のあるサイトがユーザーの訪問履歴を観察する可能性を下げつつも、 :visited を有用に保つためのものでした。 しかしこれは結局勝ち目のない軍拡競争であり、 これらの緩和策があってもユーザーのブラウジング履歴を抽出する方法が複数文書化されています。

この節では、まず https://github.com/explainers-by-googlers/Partitioning-visited-links-history で開発・文書化されたアプローチを説明します。 これはユーザーの訪問履歴情報を分割し、 サイトオリジン自身が観測できたナビゲーションに対応するリンクのみを :visited が一致するようにするものです。 これにより :visited を 上述の複雑な緩和策なしに通常の疑似クラスとして扱うことができ、 サイトに既に理論的に利用可能な情報以外を露出せずに、 ユーザーにとっての :visited の有用性を できるだけ保つことができます。

1. visited history を次の3つ組の 集合 として定義します（タプル）：

   • 訪問した URL

   • ナビゲーションを開始したサイトの origin

   • ナビゲーションを開始したフレームを含むトップレベルサイトの site。 （多くの場合前項と同じになりますが、例えば iframe 内でユーザーがリンクをクリックした場合などには異なることがあります。）

2. ページ内から（例：ユーザーのリンククリックやページ内スクリプトによるナビゲーション開始など）ナビゲーションが発生した際には、 そのナビゲーション先の URL、リンクやスクリプトを含むページの origin、およびそのページを含むトップレベルサイトの（schemeful な） site を visited history に記録するエントリを追加します。

   注: これにより、サイトはそのオリジン内のどこからでもユーザーがクリックしたリンクの :visited 情報を 観測できるようになります。言い換えれば、そのサイトが A のときの任意の A -> B ナビゲーションに対して情報が得られます。

   さらに、トップレベルフレームまたはそのトップレベルフレームと同一オリジンの iframe からのナビゲーションについては、 宛先の URL、その宛先の origin、そして宛先の site を記録するエントリも visited history に追加します。

   注: これにより、サイトは自身のページに関する:visited情報を確認できます （これは既にそのサイトから観測可能な情報です）。 このことは、そのページへのナビゲーションをどのサイトが始めたかに関係なく当てはまります。 言い換えれば、どんな A → B のナビゲーションでも、 サイトがBの場合に該当します。

   注: 注目すべき点として、アドレスバーへの直接入力、ブックマークのクリック、 別プログラムからのリンクドラッグなど、ユーザーエージェントの UI によってトリガーされた直接のナビゲーションは visited history のエントリを追加しません。 もちろんこれらはブラウザが他の目的（例えばアドレスバー入力時の URL 提案など）で用いる訪問履歴には依然として追加され得ます。

3. リンク要素が :link か :visited に一致するかを判定する際、 リンクの宛先、リンクを含むページの origin、リンクを含むトップレベルサイトが visited history のタプルと一致する場合にのみリンクを :visited として扱うようにしてください。

18. 変更点

18.1. 2022年11月11日作業草案以降の変更

2022年11月11日作業草案（https://www.w3.org/TR/2022/WD-selectors-4-20221111/）以降の主な変更点：

• :read-write と :has() から at-risk ステータスを削除しました。

• :popover-open 疑似クラスを追加しました。 （Issue 8637）

• :has() と :nth-child() / :nth-last-child() の セレクター引数をもはや寛容（forgiving）ではなくしました。 （Issue 7676）

• レガシーなシングルコロン疑似要素構文を文法そのものに移しました。 （Issue 8122）

• :local-link 疑似クラスを Level 5 に延期しました。 （Issue 12799）

• :interest-source と :interest-target 疑似クラスを Level 5 に延期しました。 （Issue 12799）

• :blank 疑似クラスを Level 5 に延期しました。 （Issue 12799）

• グリッド構造（列）セレクターを Level 5 に延期しました。 （Issue 12799）

• 時間次元的疑似クラスを Level 5 に延期しました。 （Issue 12799）

18.2. 2022年5月7日作業草案以降の変更

2022年5月7日作業草案（https://www.w3.org/TR/2022/WD-selectors-4-20220507/）以降の主な変更点：

• :open 疑似クラスを追加しました。 （Issue 7319, Issue 11039）

• pseudo-elements を :has() の中から除外しました（明示的に許可されている場合を除く）。 （Issue 7463）

• :has() のネストを禁止しました。 （Issue 7344）

• ::lang("") のマッチや言語タグが付与されていない要素のマッチを定義しました。 （Issue 6915）

• 「scoped」セレクターと「relative」セレクターの概念を完全に切り離しました。 （Issue 6399）

  • 「セレクターを絶対化する（absolutize a selector）」制約も削除し、 相対セレクターの照合をアンカリング要素に基づいて定義しました。

• :nth-child() に対する複合セレクターの制限を元に戻しました。 （Issue 3760）

• :-webkit-autofill を legacy selector alias として定義しました。 （Issue 7474）

18.3. 2018年11月21日作業草案以降の変更

2018年11月21日作業草案（https://www.w3.org/TR/2018/WD-selectors-4-20181121/）以降の主な変更点：

• セレクタープロファイルを削除し、:has() をオプションかつリスクありとして扱うように変更しました。 (Issue 3925)
• サブ疑似要素を定義するための § 3.6.4 Sub-pseudo-elements を追加しました。
• :defined を追加しました。 （Issue 2258）
• :modal を追加しました。 （Issue 6965）
• :fullscreen と :picture-in-picture を追加しました。 （Issue 3796）
• :seeking、:buffering、および :stalled 再生状態の疑似クラスを追加しました。 （Issue 3821）
• :muted と :volume-locked を追加しました（サウンド状態疑似）。 （Issue 3821 と Issue 3933）
• :autofill を追加しました。 （Issue 5775）
• :user-valid を追加しました。 （Discussion）
• :is()、:where()、:has()、:nth-child()、および :nth-last-child() を 引数に無効なセレクターを含む場合でも自身が無効にならないよう定義しました。 （Issue 3264）
• :nth-child() と :nth-last-child() の セレクターを当面 compound selectors に制限しました。 （Issue 3760）
• 文字列の大文字小文字を区別するマッチングを [INFRA] の定義に言及して明確化しました。
• UA 提供のプレースホルダーテキストが :placeholder-shown をトリガーすることを明確化しました。
• :focus-visible の定義を明確化しました。
• 文法セクションでの注意書きを書き換え、<compound-selector> 間で <combinator> トークンが欠けている場合に空白が必要であることを規範的に記述しました。

18.4. 2018年2月2日作業草案以降の変更

2018年2月2日作業草案（https://www.w3.org/TR/2018/WD-selectors-4-20180202/）以降の主な変更点：

• ゼロ特異性セレクターの名称を :where() に変更しました。 (Issue 2143)
• :matches() を :is() にリネームしました。 (Issue 3258)
• :empty の定義を、空白文字のみのノードを無視するように変更しました。 (Issue 1967)
• :blank の定義を、空要素ではなく空のユーザー入力を表すように変更しました。 (Issue 1283)
• :is()、:has()、そして :nth-child() の特異性が、どのセレクター引数が一致したかに依存しないように変更しました。 (Issue 1027)
• HTMLの関連機能が削除されたため、:drop() 疑似クラスを廃止しました。 (Issue 2257)
• 属性セレクターに大文字・小文字区別フラグ s を追加しました。 (Issue 2101)
• :focus-visible に関するさらなるガイダンスを追加しました。
• 付録B：非推奨だが互換のため必要な -webkit- パースの挙動を追加し、::-webkit- 疑似要素のパーズの挙動について定義しました。 (Issue 3051)
• 分かりやすさのため、空白の許可範囲について文法規則を書き直しました。 （§ 16 文法参照。）