セレクターレベル 4

1. はじめに

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

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

これらの式は様々な用途で利用されます：

要素自身に対して、特定の条件に一致するかを判定する（例：element.matches()関数、[DOM]で定義）
要素ツリー全体に適用し、条件に一致する要素の集合へとフィルタリングする（例：document.querySelectorAll()関数、[DOM]で定義、または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の断片を平坦な記述として表したりできます。

セレクターには、単純な要素名から、豊かな文脈表現まで幅広い種類があります。

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

パターン	意味	セクション	レベル
`*`	任意の要素	§ 5.2 全称セレクター	2
`E`	E型の要素	§ 5.1 型（タグ名）セレクター	1
`E:not(s1, s2, …)`	E要素のうち、複合セレクター`s1`または複合セレクター`s2`のいずれにも一致しないもの	§ 4.3 否定（非一致）疑似クラス: :not()	3/4
`E:is(s1, s2, …)`	E要素のうち、複合セレクター`s1`または複合セレクター`s2`のどちらかに一致するもの	§ 4.2 任意一致疑似クラス: :is()	4
`E:where(s1, s2, …)`	E要素のうち、複合セレクター`s1`または複合セレクター`s2`のどちらかに一致するが特異性に寄与しないもの	§ 4.4 特異性調整疑似クラス: :where()	4
`E:has(rs1, rs2, …)`	E要素をアンカーとして、相対セレクター`rs1`または`rs2`のいずれかに一致する要素が存在する場合	§ 4.5 関係疑似クラス: :has()	4
`E.warning`	クラス`warning`を持つE要素（クラスの決定方法は文書言語で定義）	§ 6.6 クラスセレクター	1
`E#myid`	IDが`myid`であるE要素	§ 6.7 IDセレクター	1
`E[foo]`	`foo`属性を持つE要素	§ 6.1 属性存在・値セレクター	2
`E[foo="bar"]`	`foo`属性値が`bar`と完全一致するE要素	§ 6.1 属性存在・値セレクター	2
`E[foo="bar" i]`	`foo`属性値が`bar`のいずれかの（ASCII範囲）大文字小文字パターンに完全一致するE要素	§ 6.3 大文字・小文字の区別	4
`E[foo="bar" s]`	`foo`属性値が同一である`bar`と一致するE要素	§ 6.3 大文字・小文字の区別	4
`E[foo~="bar"]`	`foo`属性値がスペース区切り値のリストで、その中に`bar`と完全一致する値が含まれるE要素	§ 6.1 属性存在・値セレクター	2
`E[foo^="bar"]`	`foo`属性値が文字列`bar`で始まるE要素	§ 6.2 部分一致属性セレクター	3
`E[foo$="bar"]`	`foo`属性値が文字列`bar`で終わるE要素	§ 6.2 部分一致属性セレクター	3
`E[foo*="bar"]`	`foo`属性値に部分文字列`bar`が含まれるE要素	§ 6.2 部分一致属性セレクター	3
`E[foo\|="en"]`	`foo`属性値がハイフン区切りの値リストで、最初に`en`を含むE要素	§ 6.1 属性存在・値セレクター	2
`E:dir(ltr)`	E型の要素で左から右への方向性を持つもの（方向性の決定方法は文書言語で定義）	§ 7.1 方向性疑似クラス: :dir()	4
`E:lang(zh, "*-hant")`	E型の要素で、中国語（いずれかの方言や書記体系）または伝統的な漢字で書かれているものとタグ付けされたもの	§ 7.2 言語疑似クラス: :lang()	2/4
`E:any-link`	ハイパーリンクのソースアンカーとなるE要素	§ 8.1 ハイパーリンク疑似クラス: :any-link	4
`E:link`	ハイパーリンクのソースアンカーとなり、ターゲットがまだ訪問されていないE要素	§ 8.2 リンク履歴疑似クラス: :link と :visited	1
`E:visited`	ハイパーリンクのソースアンカーとなり、ターゲットがすでに訪問済みのE要素	§ 8.2 リンク履歴疑似クラス: :link と :visited	1
`E:local-link`	ハイパーリンクのソースアンカーとなり、現在のURLをターゲットとするE要素	§ 8.3 ローカルリンク疑似クラス: :local-link	4
`E:target`	現在のURLのターゲットとなるE要素	§ 8.4 ターゲット疑似クラス: :target	3
`E:target-within`	現在のURLのターゲット、またはその要素を含むE要素	§ 8.5 ターゲットコンテナ疑似クラス: :target-within	4
`E:scope`	スコープルートとなるE要素	§ 8.6 参照要素疑似クラス: :scope	4
`E:current`	時間次元キャンバス上で現在表示されているE要素	§ 10.1 現在要素疑似クラス: :current	4
`E:current(s)`	セレクター`s`に一致する最も深い:current要素	§ 10.1 現在要素疑似クラス: :current	4
`E:past`	時間次元キャンバス上で過去に属するE要素	§ 10.2 過去要素疑似クラス: :past	4
`E:future`	時間次元キャンバス上で未来に属するE要素	§ 10.3 未来要素疑似クラス: :future	4
`E:active`	アクティブ状態のE要素	§ 9.2 アクティベーション疑似クラス: :active	1
`E:hover`	カーソルが上にある、または子孫要素がカーソル上にあるE要素	§ 9.1 ポインターホバー疑似クラス: :hover	2
`E:focus`	ユーザー入力フォーカスを持つE要素	§ 9.3 入力フォーカス疑似クラス: :focus	2
`E:focus-within`	ユーザー入力フォーカスを持つか、入力フォーカスを持つ要素を含むE要素	§ 9.5 フォーカスコンテナ疑似クラス: :focus-within	4
`E:focus-visible`	ユーザー入力フォーカスを持ち、UAがフォーカスリングなどのインジケータを描画すべきと判断したE要素	§ 9.4 フォーカス表示疑似クラス: :focus-visible	4
`E:enabled E:disabled`	有効または無効状態のUI要素E	§ 13.1.1 :enabled ・ :disabled 疑似クラス	3
`E:read-write` `E:read-only`	ユーザーが変更可能または変更不可なUI要素E	§ 13.1.2 変更可能性疑似クラス: :read-only ・ :read-write	3-UI/4
`E:placeholder-shown`	プレースホルダー文字列を表示している入力コントロール	§ 13.1.3 プレースホルダー表示疑似クラス: :placeholder-shown	3-UI/4
`E:default`	関連選択肢グループ内でデフォルト項目となるUI要素E	§ 13.1.5 デフォルト選択疑似クラス: :default	3-UI/4
`E:checked`	選択（チェック）済みのUI要素E（例：ラジオボタンやチェックボックス）	§ 13.2.1 選択オプション疑似クラス: :checked	3
`E:indeterminate`	不定状態（チェック済みでも未チェックでもない）UI要素E	§ 13.2.2 不定値疑似クラス: :indeterminate	4
`E:valid` `E:invalid`	データ妥当性条件を満たす・満たさないユーザー入力要素E	§ 13.3.2 妥当性疑似クラス: :valid ・ :invalid	3-UI/4
`E:in-range` `E:out-of-range`	値が範囲内または範囲外のユーザー入力要素E	§ 13.3.3 範囲疑似クラス: :in-range ・ :out-of-range	3-UI/4
`E:required` `E:optional`	入力が必須・任意のユーザー入力要素E	§ 13.3.4 任意性疑似クラス: :required ・ :optional	3-UI/4
`E:blank`	値が空（未入力・未設定）のユーザー入力要素E	§ 13.3.1 空値疑似クラス: :blank	4
`E:user-invalid`	ユーザーが変更し、入力が不正（無効・範囲外・必須なのに未入力）となっているユーザー入力要素E	§ 13.3.5 ユーザー操作疑似クラス: :user-valid ・ :user-invalid	4
`E:root`	ドキュメントのルートとなるE要素	§ 14.1 :root 疑似クラス	3
`E:empty`	子要素（要素やテキスト）がなく、空白のみの可能性があるE要素	§ 14.2 :empty 疑似クラス	3
`E:nth-child(n [of S]?)`	親要素内で`S`に一致し、`n`番目のE要素	§ 14.3.1 :nth-child() 疑似クラス	3/4
`E:nth-last-child(n [of S]?)`	親要素内で`S`に一致し、最後から数えて`n`番目のE要素	§ 14.3.2 :nth-last-child() 疑似クラス	3/4
`E:first-child`	親要素内で最初のE要素	§ 14.3.3 :first-child 疑似クラス	2
`E:last-child`	親要素内で最後のE要素	§ 14.3.4 :last-child 疑似クラス	3
`E:only-child`	親要素内で唯一のE要素	§ 14.3.5 :only-child 疑似クラス	3
`E:nth-of-type(n)`	同じ型の兄弟要素のうち`n`番目のE要素	§ 14.4.1 :nth-of-type() 疑似クラス	3
`E:nth-last-of-type(n)`	同じ型の兄弟要素のうち、最後から数えて`n`番目のE要素	§ 14.4.2 :nth-last-of-type() 疑似クラス	3
`E:first-of-type`	同じ型の兄弟要素のうち最初のE要素	§ 14.4.3 :first-of-type 疑似クラス	3
`E:last-of-type`	同じ型の兄弟要素のうち最後のE要素	§ 14.4.4 :last-of-type 疑似クラス	3
`E:only-of-type`	同じ型の兄弟要素のうち唯一のE要素	§ 14.4.5 :only-of-type 疑似クラス	3
`E F`	E要素の子孫であるF要素	§ 15.1 子孫結合子（）	1
`E > F`	E要素の子であるF要素	§ 15.2 子結合子（>）	2
`E + F`	E要素の直後に続くF要素	§ 15.3 隣接兄弟結合子（+）	2
`E ~ F`	E要素の前に存在するF要素	§ 15.4 一般兄弟結合子（~）	3
`F \|\| E`	F要素が表すカラムに属する、グリッド／テーブルのセルとなるE要素	§ 16.1 カラム結合子（\|\|）	4
`E:nth-col(n)`	グリッド／テーブルで`n`番目のカラムに属するセルとなるE要素	§ 16.2 :nth-col() 疑似クラス	4
`E:nth-last-col(n)`	グリッド／テーブルで最後から数えて`n`番目のカラムに属するセルとなるE要素	§ 16.3 :nth-last-col() 疑似クラス	4

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

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

3.1. 構造と用語

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

単純セレクターは、1つの要素に対する単一条件です。型セレクター、全称セレクター、属性セレクター、クラスセレクター、IDセレクター、または疑似クラスは単純セレクターです。（これはセレクターの<simple-selector>で表現されます。文法参照。）ある要素が一致するとされるのは、その単純セレクターが、この仕様および文書言語に従って要素を正しく記述する場合です。

複合セレクターは、単純セレクターの連続であり、結合子で区切られていません。 1つの要素に複数の条件を同時に課します。型セレクターや全称セレクターを含む場合、それらは連続の最初に来なければなりません。連続内には型セレクターまたは全称セレクターは1つだけ許容されます。（複合セレクターは、セレクターの<compound-selector>で表現されます。文法参照。）ある要素が複合セレクターに一致するとは、複合セレクター内のすべての単純セレクターに一致する場合です。

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

結合子は、両側の複合セレクターが表す2要素間の関係条件です。セレクターレベル4の結合子には、子孫結合子（空白）、子結合子（U+003E、>）、隣接兄弟結合子（U+002B、+）、一般兄弟結合子（U+007E、~）があります。 2つの要素が結合子に一致するとは、それらの関係条件が成立する場合です。

複雑セレクターは、結合子で区切られた1つ以上の複合セレクターの並びです。特定の関係で結ばれた要素群に同時に条件を課します。（複雑セレクターは<complex-selector>で表現されます。文法参照。）ある要素が複雑セレクターに一致するとは、各複合セレクターに対応する要素のリストが存在し、その各要素ペアが間にある結合子の条件を満たし、最後の要素が与えられた要素である場合です。

注: つまり、単一の複合セレクターからなるセレクターは、構成する単純セレクターすべての条件を満たす要素に一致します。さらに別の複合セレクターと結合子を前に付加すると、追加の一致条件が課され、複雑セレクターの対象は常に最後の複合セレクターで表される要素の部分集合となります。

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

疑似要素の扱いはここで未定義ですが、本来扱うべきです。

3.2. データモデル

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

各要素は、以下の5つの属性のいずれかを持つことができ、これらはすべて文字列として一致判定されます：

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

個々の要素が上記のいずれも持たない場合もあり、そのような要素は特徴なし（featureless）です。特徴なし要素は、明示的に一致するよう定義されていない限り、どのセレクターにも一致しません。特定のセレクターが特徴なし要素に一致する場合は、既定の名前空間は無視されなければなりません。[CSS3NAMESPACE]

例：シャドウホスト（シャドウツリー内）は特徴なしであり、どの疑似クラスにも一致しません（ただし:host や:host-context()などは除く）。

多くのセレクターは、文書言語（文書ツリーの言語や意味）や、ホスト言語（セレクター構文を使う言語）の意味に依存します。例えば、:lang()セレクターは文書言語（例：HTML）が要素と言語の関連づけ方法を定義します。別の例として、::first-line疑似要素は、ホスト言語（例：CSS）が ::first-line疑似要素の意味や機能を定義します。

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

一部のホストアプリケーションは、セレクターを文書の特定部分や断片にスコープすることを選択できます。スコープの根となる部分はスコープルートと呼ばれます。

セレクターがスコープされる場合、そのセレクターは対象要素がスコープルートの子孫である場合のみ一致します。（セレクターの他の部分は制限なく一致可能です。最終的に一致した要素がスコープ内である必要があります。）

例： querySelector()メソッド（[DOM]で定義）は、セレクターを呼び出し要素を基準にスコープして評価することができます。

widget.querySelector("a")のような呼び出しは、 a 要素がwidget要素内にある場合のみ検出し、文書全体の他の a要素は無視されます。

3.4. 相対セレクター

一部の文脈では相対セレクターを許容し、これは1つ以上のアンカー要素に対して相対的な要素を表すセレクターの省略記法です。相対セレクターは結合子から始まり、セレクターの最初にアンカー要素を暗黙的に表します。（結合子が省略された場合、子孫結合子が暗黙的に適用されます。）

相対セレクターは、セレクターの<relative-selector>で表現され、そのリストは<relative-selector-list>で表現されます。

3.5. 疑似クラス

疑似クラスは、単純セレクターの一種であり、文書ツリーの外部情報や他の単純セレクターで表現するのが困難または不可能な条件で選択を可能にします。また、動的に変化する場合もあり、ユーザーが文書を操作することで要素が疑似クラスを獲得・喪失することもあります（文書自体は変更されません）。疑似クラスは、文書ソースや文書ツリーには現れず変更もしません。

疑似クラスの構文は「:」（U+003A コロン）＋疑似クラス名（CSS識別子）です。関数型疑似クラスの場合は、括弧内に引数を取ります。

例：:validは通常の疑似クラス、 :lang()は関数型疑似クラスです。

全てのCSSキーワード同様、疑似クラス名はASCII大文字小文字を区別しません。コロンと疑似クラス名の間、および関数型疑似クラス名と括弧の間には空白を入れてはいけません（CSS関数トークンを構成します）。また、通常通り、関数型疑似クラスの括弧内の引数まわりには空白を入れても構いません（特に指定がない限り）。

単純セレクター同様、疑似クラスはセレクター中のすべての複合セレクターで利用でき、型セレクターや全称セレクターの後に記述する必要があります（存在する場合）。

注: 一部の疑似クラスは互いに排他的であり（同じ複合セレクターに含めても、決して一致しません）、他は同時に同じ要素に適用することも可能です。

3.6. 疑似要素

一部の疑似クラスが文書ツリーに存在しない追加状態情報を表すように、疑似要素は、文書ツリーに直接存在しない要素を表します。これは、文書ツリーが提供する以上の抽象化を作成するために使われます。たとえば、疑似要素を使うことで、文書言語の要素に対応しない部分（要素境界に揃わない範囲やツリー構造外の範囲など）を選択したり、文書ツリーに存在しない内容や別投影の内容を表現したり、スタイリング・レイアウト・ユーザー操作など文書ツリーに反映されない情報に基づく範囲を扱うことができます。

例：文書言語には、要素コンテンツの最初の文字や最初の行にアクセスする仕組みはありませんが、疑似要素（::first-letterや::first-line）によってそれらをスタイルできます。特に::first-lineの場合、疑似要素が表す内容範囲はレイアウト情報に依存するため、文書ツリーからは推測できません。

疑似要素は、ソース文書に存在しない内容も表現できます。例として::beforeや::after疑似要素は、どの要素の内容の前後に追加コンテンツを挿入できます。

疑似クラスと同様、疑似要素は文書ソースや文書ツリーに現れたり変更したりしません。そのため、構造疑似クラスや発生元要素(originating element)やそのツリーに関する他のセレクターの解釈には影響しません。

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

3.6.1. 構文

疑似要素の構文は、「::」（U+003Aコロン2つ）＋疑似要素名（識別子）です。疑似要素名はASCII大文字小文字を区別しません。コロン2つの間、およびコロンと名前の間に空白は許容されません。

CSS Level 1およびCSS Level 2では疑似要素と疑似クラスが1コロン構文で混同されていたため、ユーザーエージェントはLevel 1＆2の疑似要素 (::before, ::after, ::first-line, ::first-letter) については以前の1コロン記法も受け入れる必要があります。この互換記法は他の疑似要素には許可されません。ただし、この構文は推奨されないため、著者はこれらの疑似要素にはLevel 3以降の2コロン構文を使用してください。

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

3.6.2. 文書ツリーへの紐付け

疑似要素はツリー内で独立して存在するものではなく、常にページ上の他の要素に紐付いています。これが発生元要素です。構文上は、疑似要素は、それに紐付く複合セレクターの直後に記述されます。この複合セレクターが省略された場合は、全称セレクター *が暗黙的に用いられます。

例：セレクターdiv a::beforeでは、セレクターで一致したa要素が発生元要素となり、それに紐付く::before疑似要素にスタイルが適用されます。

セレクター::first-lineは*::first-lineと同等であり、文書内のすべての要素の::first-line疑似要素を選択します。

セレクター内で疑似要素が現れる場合、疑似要素の前の部分は疑似要素の発生元要素を選択し、疑似要素の後ろの部分（あれば）は疑似要素自体に適用されます。（後述。）

3.6.3. 疑似要素の疑似クラス化

疑似要素の直後には、ユーザー操作疑似クラスをいくつでも組み合わせて記述できます。この場合、疑似要素は該当状態の時にのみ表現されます。これらの疑似クラスが疑似要素に適用可能かは、疑似クラスや疑似要素の定義によります。特に指定がない限り、これらの疑似クラスは疑似要素には一致しません。

:not()や :is()が上記の疑似クラスを含む場合に使用できることを明確化してください。

例：:hover疑似クラスは任意の疑似要素に適用できるため、::first-line:hoverは最初の行がホバーされた時に一致します。一方、:focusや::first-lineは、:focusが::first-lineに適用できると定義されていないため、 ::first-line:focusは何にも一致しません。

::first-line:not(:focus)は何かに一致するか？

::first-line:hoverと:hover::first-lineは全く異なることに注意してください。 :hover::first-lineはホバーされた発生元要素の最初の行に一致します！例えば、:hover::first-lineは段落の2行目がホバーされている時にも段落の最初の行に一致しますが、 ::first-line:hoverは最初の行自体がホバーされた時のみ一致します。

注: 今後の仕様で特に指定がない限り、ユーザー操作疑似クラス以外を疑似要素に複合して使うことはできません。例えば、::before:first-childは無効なセレクターです。

3.6.4. サブ疑似要素

一部の疑似要素は、他の疑似要素の発生元要素となることができ、これをサブ疑似要素と呼びます。また、その元となる疑似要素は発生元疑似要素です。例：::beforeにlist-item display型を指定すると、その::before::markerサブ疑似要素の発生元疑似要素となります。

区別が必要な場合は、最終発生元要素（非疑似の本物の要素）を指します。

対応するサブ疑似要素が他の仕様で明示的に定義されていない限り、別の疑似要素セレクターと複合した疑似要素セレクターは無効です。例：::before::beforeは無効ですが、 ::before::markerは有効です（::before::markerサブ疑似要素をサポートする実装の場合）。

3.6.5. 内部構造

一部の疑似要素は内部構造を持つと定義されています。これら疑似要素の後ろに子／子孫結合子を記述して関係性を表すことができます。疑似要素の後に結合子が続くセレクターは、その他の場合は無効です。

例：::first-letter + spanや::first-letter emは無効なセレクターです。しかし、もし新たに内部構造を持つ::shadow疑似要素が定義されたとすると、 ::shadow > pは有効なセレクターになります。

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

そのような疑似要素の子要素は、他の要素の子である場合もあります。ただし、少なくともCSSでは、レンダリングはボックスツリーの木構造性を維持するよう定義されなければなりません。

例：::slotted疑似要素は要素を自分の子として扱います。以下の断片の場合：

<div>
  <span>foo</span>
  <"shadow root">
    <content></content>
  </"shadow root">
</div>

セレクターdiv > spanとdiv::shadow ::slotted > spanは異なる経路で同じ要素を選択します。

ただし、レンダリング時には <span>要素は <content>要素の子であるかのようにボックスを生成し、 <div>要素の子としてではなく、ボックスツリーの木構造が維持されます。

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

セレクターの構文はASCII大文字小文字を区別しません（[a-z]と[A-Z]は同等）ですが、セレクターの管理外の部分、すなわち文書言語の要素名・属性名・属性値の大文字小文字の区別は文書言語に依存します。

例：HTMLでは要素名・属性名はASCII大文字小文字を区別しませんが、 XMLでは区別されます。

名前空間プレフィックスの大文字小文字の区別は[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. 無効なセレクターとエラー処理

ユーザーエージェントは無効なセレクターの処理規則を守らなければなりません：

セレクター内の構文エラー（認識できないトークンや、その位置で許可されていないトークンなど）は、そのセレクターを無効とします（§ 18 文法や各セレクターの構文定義参照）。
未宣言の名前空間プレフィックスを含む単純セレクターは無効です
無効な単純セレクター・無効な結合子・無効なトークンを含むセレクターは無効です。
無効なセレクターを含むセレクターリストは無効です。
複合セレクターを含まない空のセレクターは無効です。

注: CSSの前方互換パース原則に従い、 UAはサポートできない疑似クラス・疑似要素・結合子・その他構文要素を無効として扱う必要があります。部分実装参照。

無効なセレクターは何も表現せず、何にも一致しません。

3.10. レガシーエイリアス

一部のセレクターにはレガシーセレクターエイリアスがあります。これはパース時に標準名に変換される名称であり、セレクターを表現するオブジェクトモデルには現れません。

4. 論理結合

4.1. セレクターリスト

カンマ区切りのセレクターリストは、セレクターリスト内の各セレクターで選択されたすべての要素の和集合を表現します。（カンマはU+002C。）CSSでは複数のセレクターが同じ宣言を共有する場合、カンマ区切りリストにまとめることができます。カンマの前後に空白を入れても構いません。

CSS例：この例では、同じ宣言を持つ3つの規則を1つにまとめています。つまり、

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つだけが無効になります。

無効なCSS例：

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

は次のようには等価ではありません：

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

上記のセレクター（h1, h2..foo, h3）は全体が無効となり、スタイル規則全体が破棄されます。（グループ化しない場合はh2..fooの規則だけが無効になります。）

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

:is()疑似クラスは、<forgiving-selector-list>を引数とする関数型疑似クラスです。

パース後の引数が空リストの場合、疑似クラス自体は有効ですが何にも一致しません。それ以外の場合、リスト内のいずれかのセレクターに一致した要素に疑似クラスが一致します。

注: :is()疑似クラスの特異性は、最も特異な引数の特異性で置き換えられます。そのため、:is()を用いたセレクターは、:is()なしで書かれた等価セレクターと特異性が必ずしも同じとは限りません。例：:is(ul, ol, .list) > [hidden]とul > [hidden], ol > [hidden], .list > [hidden]の場合、olの[hidden]子要素は最初のセレクターでは特異性(0,2,0)で一致し、後者では(0,1,1)となります。 § 17 セレクターの特異性計算参照。

疑似要素は任意一致疑似クラスでは表現できず、 :is()内では無効です。

デフォルト名前空間宣言は、複合セレクター（対象）には影響しません。ただし、その複合セレクターが明示的な全称セレクターや型セレクターを含む場合を除きます。

例：次のセレクターは、ホバーまたはフォーカスされた任意の名前空間の要素に一致します。特に、デフォルト名前空間の要素だけに限定されません。

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

一方、次のセレクターは:is()記法で明示的な全称セレクターを使っているため、デフォルト名前空間内でホバーまたはフォーカスされた要素だけを表します：

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

本仕様の以前の草案では、この疑似クラスに:matches()という名称が使われていたため、 UAは必要に応じて、後方互換のためにレガシーセレクターエイリアスとして:is()に:matches()も実装してよいです。

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

:not()疑似クラスは、セレクターリストを引数とする関数型疑似クラスです。引数で表されない要素に一致します。

注: セレクターレベル3では、単純セレクター1つだけが:not()の引数として許容されていました。

注: :not()疑似クラスの特異性は、引数内で最も特異なセレクターの特異性に置き換えられます。したがって、:not(:is(argument))と同じふるまいとなります。 § 17 セレクターの特異性計算参照。

疑似要素は否定疑似クラスでは表現できず、 :not()内では無効です。

例：次のセレクターはHTML文書内のすべてのbutton要素のうち、disabledでないものに一致します。

button:not([DISABLED])

次のセレクターはFOO要素以外すべてを表します。

*:not(FOO)

次の複合セレクターはリンク以外のすべてのHTML要素を表します。

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

:is()同様、デフォルト名前空間宣言は、複合セレクター（対象）には影響しません。ただし、明示的な全称セレクターや型セレクターを含む場合を除きます。（例は:is()参照。）

注: :not()疑似クラスでは無用なセレクターも書けます。例えば:not(*|*)は全く要素に一致しませんし、 div:not(span)はdivと同義ですが特異性が高くなります。

4.4. 特異性調整疑似クラス：:where()

特異性調整疑似クラス:where()は、 :is()と同じ構文と機能を持つ関数型疑似クラスです。 :is()と異なり、 :where()疑似クラス自身も、その引数も、セレクターの特異性に一切寄与しません—その特異性は常にゼロです。

これは、セレクターにフィルターを加えつつ、関連するスタイル宣言が簡単に上書きできるようにする際に有用です。

下記は特異性のヒューリスティックが著者の期待と合致しない典型例です：

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

nav a {
  /* 効果なし */
  text-decoration: underline;
}

しかし、:where()を使うことで著者の意図を明示できます：

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

nav a {
  /* 期待通り動作！ */
  text-decoration: underline;
}

注: 今後のSelectors仕様では、この疑似クラスの特異性を明示的に設定する引数が追加される可能性があります。

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

関係疑似クラス:has()は、 <forgiving-relative-selector-list>を引数に取る関数型疑似クラスです。相対セレクターをこの要素にアンカーとして評価したときに、少なくとも1つの要素に一致する場合、その要素を表します。

:has()疑似クラスは入れ子にできません。:has()の中で:has()は無効です。また、:has-allowed 疑似要素として明示的に定義されていない限り、疑似要素は:has()内のセレクターとして無効です。（本仕様では:has-allowed 疑似要素は定義していませんが、他仕様で定義される可能性があります。）

注: 疑似要素は一般的に:has()から除外されています。これは多くの疑似要素が祖先のスタイル次第で条件付きで存在するため、 :has()での問い合わせを許可すると循環参照が生じるためです。

例：次のセレクターは、<a>要素で<img>子要素を持つものだけに一致します：

a:has(> img)

次のセレクターは、直後に別の<dt>要素が続く<dt>要素に一致します：

dt:has(+ dt)

次のセレクターは、いずれの見出し要素も含まない<section>要素に一致します：

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

上記セレクターでは、入れ子の順番が重要です。もし2つの疑似クラスのネストを逆にして：

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

...とすると、見出し要素以外を含む<section>要素すべてに一致してしまいます。

5. 要素セレクター

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

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

例：セレクターh1は、文書内のh1要素を表します。

型セレクターは、 CSS修飾名（識別子＋オプションの名前空間プレフィックス）として記述します。[CSS3NAMESPACE]（§ 5.3 要素セレクターの名前空間参照。）

5.2. 全称セレクター

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

これは、ローカル名としてアスタリスク（* U+002A）を使ったCSS修飾名として記述します。型セレクター同様、全称セレクターは名前空間で修飾でき、その名前空間に属する要素に限定されます。デフォルト名前空間の影響は§ 5.3 要素セレクターの名前空間参照。

要素が特徴なしでない限り、全称セレクターの有無は一致判定に影響しません。（特徴なし要素は、全称セレクターを含むいかなるセレクターにも一致しません。）

*[hreflang|=en]と[hreflang|=en]は同義です。
*.warningと.warningは同義です。
*#myidと#myidは同義です。

全称セレクターは他の型セレクターと同じ構文規則に従います。 1つの複合セレクターにつき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|E（nsはデフォルト名前空間）と同等。

CSS例：

@namespace foo url(http://www.example.com);
foo|h1 { color: blue }  /* 最初の規則 */
foo|* { color: yellow } /* 2番目の規則 */
|h1 { color: red }      /* ...*/
*|h1 { color: green }
h1 { color: green }

最初の規則（@namespace規則は除く）は、 "http://www.example.com"名前空間のh1要素だけに一致します。

2番目の規則は、"http://www.example.com"名前空間のすべての要素に一致します。

3番目の規則は、名前空間なしのh1要素だけに一致します。

4番目の規則は、いずれかの名前空間（名前空間なしを含む）のh1要素に一致します。

最後の規則は、デフォルト名前空間が定義されていないため、4番目の規則と同じ意味です。

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

例：次のスタイルシートでは、

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

.special { ... }

.specialセレクターは、型名への言及がなくても、"http://example.com/foo"名前空間の要素だけに一致します。

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

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

一部のホスト言語では、要素が「定義済み」または「構築済み」とそうでないものに区別できます。 :defined 疑似クラスは、ホスト言語が定めた完全に定義済みの要素に一致します。

ホスト言語にこの区別がない場合は、その中のすべての要素が:definedに一致します。

HTMLでは、すべての組み込み要素は常に定義済みとみなされるため、次の例は必ず一致します：

p:defined { ... }

カスタム要素は、最初は未定義で、正しく登録されて初めて定義済みとなります。つまり: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属性を持つもの（値は問わない）を表します：

h1[title]

次の例では、セレクターがclass属性が正確に"example"であるspan要素を表します：

span[class="example"]

複数の属性セレクターは、要素の複数属性や同じ属性に対する条件を表現できます。以下はhello属性が"Cleveland"、goodbye属性が"Columbus"であるspan要素を表します：

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

以下のCSS規則は"="と"~="の違いを示します。1つ目のセレクターは、a要素でrel属性値が"copyright copyleft copyeditor"のようなものに一致します。2つ目はhref属性値が正確に"http://www.w3.org/"であるa要素だけに一致します。

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

次のセレクターは、hreflang属性が正確に"fr"であるa要素を表します。

a[hreflang=fr]

次のセレクターは、hreflang属性値が"en"で始まる（"en"、"en-US"、"en-scouse"など）a要素を表します：

a[hreflang|="en"]

次のセレクターは、属性characterの値が"romeo"または"juliet"のいずれかであるDIALOGUE要素を表します：

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

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

属性値の部分文字列一致のため、3つの追加属性セレクターが提供されています：

[att^=val]: 属性attの値が"val"で始まる要素を表します。 "val"が空文字の場合、一致しません。
[att$=val]: 属性attの値が"val"で終わる要素を表します。 "val"が空文字の場合、一致しません。
[att*=val]: 属性attの値に"val"の部分文字列が含まれる要素を表します。 "val"が空文字の場合、一致しません。

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

例：次のセレクターは、画像を参照するHTMLのobject要素を表します：

object[type^="image/"]

次のセレクターは、href属性値が".html"で終わるa要素を表します：

a[href$=".html"]

次のセレクターは、title属性値に"hello"という部分文字列が含まれるHTMLの段落要素を表します：

p[title*="hello"]

6.3. 大文字・小文字の区別

属性名や属性値の大文字・小文字の区別は、原則として文書言語に依存します。

文書言語の規則に関係なく、属性値をASCII大文字小文字を区別せずに一致させるには、属性セレクターの閉じ括弧（]）前に識別子iを追加できます。このフラグがある場合、UAは属性値をASCII大文字小文字を区別せずに一致させる必要があります（[a-z]と[A-Z]を同等とみなす）。

また、属性セレクターの閉じ括弧前に識別子sを追加すると、 UAは値を大文字小文字を区別して一致させる必要があります。この場合は文書言語の規則に関係なく「完全一致」になります。[INFRA]

セレクター構文同様、iとs識別子自体はASCII大文字小文字を区別しません。

次の規則は、XML環境で属性値が大文字小文字を区別される場合でも、 frame属性値がhsides（hsides, HSIDES, hSides等）に一致する場合にスタイルします。

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

次の規則では、HTMLがtype属性を大文字小文字区別しないと定義していても、 type="a"とtype="A"で別のスタイルを適用します。

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

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

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

属性セレクターの属性名はCSS修飾名として与えられます。事前に宣言された名前空間プレフィックスを属性名の前に「縦棒」(|)で区切って付加できます。XML名前空間勧告の原則に従い、デフォルト名前空間は属性には適用されません。したがって、名前空間部なしの属性セレクターは名前空間なし属性のみを対象とします（|attrと同等）。名前空間プレフィックスにアスタリスクを使うと、属性の名前空間に関係なく一致させることができます。

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

CSS例：

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

1つ目の規則は、"http://www.example.com"名前空間で値が"val"のatt属性を持つ要素だけに一致します。

2つ目の規則は、属性attの名前空間に関係なく（一切ない場合も含む）、その属性を持つ要素に一致します。

最後の2つの規則は同義で、名前空間なし属性attを持つ要素に一致します。

6.5. DTD内のデフォルト属性値

属性セレクターは文書ツリー内の属性値を表します。文書ツリーの構築方法はSelectorsの対象外です。一部文書形式ではDTDなどでデフォルト属性値が定義できますが、これらは文書ツリーに現れている場合のみ属性セレクターで選択できます。Selectorsは、デフォルト値が文書ツリーに含まれていてもいなくても動作するよう設計すべきです。

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

XML名前空間を認識するUAは、その名前空間の知識を使ってデフォルト属性値を文書に存在するものとして扱うこともできますが、必須ではありません（例：XHTML UAはXHTML DTDの組み込み知識を使う必要はありません）。詳細は[XML-NAMES]参照。

注: 多くの実装は外部サブセットを無視します。これはXML仕様の非検証型プロセッサの動作と一致します。

例：

デフォルト値"decimal"を持つradix属性を持つEXAMPLE要素について、DTD断片：

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

スタイルシートに次の規則がある場合：

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

最初の規則は、radix属性がデフォルトで設定されていて明示的に指定されていない場合、要素に一致しない場合があります。すべての場合を網羅するには、デフォルト値用の属性セレクターは除外する必要があります：

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

この場合、セレクター''EXAMPLE[radix=octal]''は型セレクターよりも特異性が高いため、2番目の規則のスタイル宣言がradix属性値が"octal"の要素に対して優先されます。デフォルトのみ適用したい宣言は、非デフォルトのスタイル規則で必ず上書きするよう注意が必要です。

6.6. クラスセレクター

クラスセレクターは、ドット（. U+002E）の直後に識別子を付けて記述します。これは、その識別子で定義されたクラスに属する要素を表します（文書言語で定義）。例：[HTML5]、[SVG11]、[MATHML]では、クラスへの所属はclass属性によります。これらの言語では、ローカルclass属性への~=記法（[class~=identifier]）と同等です。

CSS例：

すべての要素でclass~="pastoral"を持つものにスタイルを割り当てる：

*.pastoral { color: green }  /* class~=pastoral の全要素 */

または単に：

.pastoral { color: green }  /* class~=pastoral の全要素 */

H1要素でclass~="pastoral"のみスタイルする：

H1.pastoral { color: green }  /* H1でclass~=pastoral */

この規則により、以下の最初のH1は緑にならず、2つ目は緑色になります：

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

次の規則は、class属性値が空白区切りリストでpastoralとmarine両方を含むP要素に一致します：

p.pastoral.marine { color: green }

この規則はclass="pastoral blue aqua marine"の場合は一致しますが、class="pastoral blue"の場合は一致しません。

注: CSSでは"クラス"属性に大きな力があるため、著者がほぼスタイルだけで構成された独自の「文書言語」を設計することもできます（HTMLのdivやspanなど）。しかし、文書言語の構造要素には認知・定義的な意味があるため、著者定義のクラスの多用は避けるべきです。

注: 要素に複数のclass属性がある場合、それらの値はスペースで連結して検索する前に扱われます。現状このような状況になる方法は知られていないため、この仕様では非規範扱いとします。

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

6.7. IDセレクター

文書言語はID型属性を宣言できる場合があります。 ID型属性の特別な点は、どの要素型であっても、同じ値のID型属性を持つ要素が1つだけという点です（適合文書の場合）。文書言語が何であれ、ID型属性は要素を一意に識別できます。 HTMLではID属性は全てidです。 XMLではID属性名は異なる場合がありますが、同じ制約が適用されます。どの属性が"ID属性"かは文書言語で定義されます。

IDセレクターは、「ナンバーサイン」（U+0023, #）の直後にID値（CSS識別子）を記述します。 IDセレクターは、ID型属性の値がセレクターの識別子と一致する要素インスタンスを表します。（適合しない文書では複数要素が1つのIDセレクターに一致する場合もあります。）

例：次のIDセレクターは、ID型属性値が"chapter1"であるh1要素を表します：

h1#chapter1

次のIDセレクターは、ID型属性値が"chapter1"である任意の要素を表します：

#chapter1

次のセレクターは、ID型属性値が"z98y"である任意の要素を表します：

*#z98y

注: XML 1.0[XML10]では、どの属性がIDかはDTDやスキーマに記載されています。XMLパース時、UAは必ずしもDTDを読まないため、要素のIDがわからない場合があります（ただし、名前空間ごとにID属性を判定できる知識を持つUAもあり得ます）。スタイルシート著者がUAがID属性を判別できない可能性を考慮する場合、通常の属性セレクター（''[name=p371] の代わりに #p371''）を使うべきです。

要素が複数のID属性を持つ場合、それらすべてがIDセレクターの対象IDとみなされます（xml:id、DOM3 Core、XML DTD、名前空間固有知識の混在などで発生し得る）。

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

7. 言語疑似クラス

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

:dir() 疑似クラスは、文書言語によって決定される要素の方向性に基づいて要素を表現するセレクターを著者が記述できるようにします。例えば、[HTML5]では、要素の方向性の決定方法が dir属性や周囲のテキスト、他の要因の組み合わせによって定義されています。別の例としては、Internationalization Tag Setのits:dirやdirRule要素が [ITS20]で [XML10]内の要素の方向性を定義できます。

:dir()疑似クラスは、スタイル状態（例えばCSSのdirectionプロパティ）によって選択されるものではありません。

:dir(ltr) 疑似クラスは左から右（ltr）の方向性を持つ要素を表し、 :dir(rtl)は右から左（rtl）の方向性を持つ要素を表します。 :dir()の引数は1つの識別子でなければならず、それ以外は無効です。識別子と括弧の間には空白を入れてもかまいません。 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構文[BCP47]で表現され、 [RFC4647]のMatching of Language Tags（3.3.2節）における 拡張フィルタリング操作で言語範囲に一致する場合に、その言語範囲に一致します。この目的のため、ワイルドカード言語範囲（"*"）は言語タグが無い（例：lang=""）要素には一致しませんが、言語が未定（lang=und）とタグ付けされた要素には一致します。一致判定はASCII大文字小文字を区別しません。言語範囲が有効な言語コードでなくても比較できます。

言語範囲が空文字列（:lang("")）の場合、言語タグがない要素だけに一致します。

注: 文書やプロトコルでは[BCP47]以降のコードを用い、 XML系ではxml:lang属性で言語を示すことが推奨されます。[XML10] 詳細は“FAQ: Two-letter or three-letter language codes.”参照。

例：次の2つのセレクターはベルギーのフランス語またはドイツ語のHTML文書を表します。さらに2つはベルギーのフランス語またはドイツ語の任意要素内のq引用を表します。

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

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

このHTML例では、BODYは''[lang|=fr]''に一致します（LANG属性を持つため）が、 BODYとPの両方が:lang(fr)に一致します（両方ともフランス語）。 PはLANG属性を持たないため、''[lang|=fr]''には一致しません。

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

さらに:lang(C)と''|=''演算子の違いは、 :lang(C)が暗黙のワイルドカード一致を行うことです。

例：:lang(de-DE)はde-DE、 de-DE-1996、de-Latn-DE、de-Latf-DE、de-Latn-DE-1996すべてに一致します。一方''[lang|=de-DE]は de-DE''とde-DE-1996だけに一致します。

主言語のサブタグでワイルドカード一致をするには、アスタリスクを使います：*-CHはde-CH、it-CH、fr-CH、rm-CHすべてに一致します。

この種の言語範囲一致で要素のlang属性値に対して選択するには、属性セレクターと言語疑似クラスを組み合わせて使います。例：[lang]:lang(de-DE)。

注: ワイルドカード言語一致とカンマ区切りリストはLevel 4で新たに追加された機能です。

8. ロケーション疑似クラス

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

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

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

ユーザーエージェントは通常、未訪問ハイパーリンクと既訪問のものを異なる方法で表示します。Selectorsは :linkおよび:visited疑似クラスで区別します：

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

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

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

次のセレクターは、クラスfootnoteを持ち、既に訪問済みのリンクを表します：

.footnote:visited

:linkと:visited疑似クラスを濫用して、ユーザーの同意なしに訪問したサイトを特定できてしまうため、 UAはすべてのリンクを未訪問として扱ったり、訪問・未訪問リンクの描画時にユーザーのプライバシーを保護する別の方法をとったりすることがあります。

8.3. ローカルリンク疑似クラス：:local-link

:local-link疑似クラスは、著者がハイパーリンクをユーザーのサイト内現在位置に基づいてスタイルできるようにします。この疑似クラスは、ハイパーリンクのターゲットの絶対URLが要素自身の文書URLと一致する場合のソースアンカー要素を表します。ハイパーリンクのターゲットがフラグメントURLを含む場合は、現在のURLのフラグメントURLも一致しなければなりません。一致しない場合、現在のURLのフラグメント部分は比較から除外されます。

例：次の規則は、ナビゲーションリスト内で現在のページを指すリンクの下線を消します：

nav :local-link { text-decoration: none; }

注: ページの現在のURLは、ユーザーが同じページ内の異なるフラグメントへのリンクをクリックしたり、 pushStateAPIの利用、ページ遷移やリダイレクト（HTTPや<meta http-equiv="...">、スクリプトなど）などの結果で変化します。 UAは:local-linkや、以下の:targetおよび:target-within疑似クラスがこうした状態変化に正しく反応するようにしなければなりません。

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

一部の文書言語では、文書のURLがさらに文書内の特定要素内をURLのフラグメントで指すことができます。このように指された要素が文書のターゲット要素です。

HTMLでは、フラグメントはページ内で同じIDを持つ要素を指します。例えば、https://example.com/index.html#section2は https://example.com/index.htmlの中でid="section2"を持つ要素を指します。

:target 疑似クラスは文書のターゲット要素に一致します。文書のURLにフラグメント識別子がない場合、ターゲット要素はありません。

例：

p.note:target

このセレクターは、参照URLのターゲット要素となる p クラスnoteの要素を表します。

CSS例：ここでは:target疑似クラスで、ターゲット要素を赤くし、画像を前に配置します（あれば）：

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

8.5. ターゲットコンテナ疑似クラス：:target-within

:target-within疑似クラスは、 :target疑似クラスが適用される要素、およびフラットツリー内の子孫（テキストノードのような非要素ノードも含む）が :targetの一致条件を満たす要素に適用されます。

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

文脈によっては、セレクターが一つ以上のスコープルートに対してマッチする場合があります。例えば、[DOM]のquerySelector()メソッドを呼び出す場合などです。 :scope擬似クラスは、このスコープルートを表します。このスコープルートは、実際の要素であっても仮想的なもの（例えばDocumentFragmentなど）であっても構いません。

スコープルートが存在しない場合、 :scopeは文書のルートを表します（:rootと同等）。特定の要素にこの疑似クラスを一致させたい場合は、該当仕様でスコープルートを定義する必要があります。

仮想的なスコープルートは、文書フラグメントのルートを表すオブジェクトであり、セレクターパターン内で他の要素との関係を表すために使えます。このスコープルートは、フラグメント内のルート要素の親として機能します。仮想的なスコープルートは特徴なしであり、セレクターの対象にはなりません。

例：DocumentFragment dfがある場合、 df.querySelectorAll(":scope > .foo") は、ドキュメントフラグメント内で「トップレベル」の.foo要素（document fragmentをparentNodeとするもの）すべてに一致します。

一方、df.querySelector(":scope")は何にも一致しません。なぜなら、ドキュメントフラグメント自身はセレクターの対象になれないからです。

9. ユーザー操作疑似クラス

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

これらの疑似クラスは互いに排他的ではありません。 1つの要素が複数のユーザー操作疑似クラスに同時に一致する場合もあります。

例：

a:link    /* 未訪問リンク */
a:visited /* 訪問済みリンク */
a:hover   /* ホバー中 */
a:active  /* アクティブリンク */

動的疑似クラスを組み合わせる例：

a:focus
a:focus:hover

最後のセレクターは、:focus疑似クラスと:hover疑似クラスの両方に一致するa要素に一致します。

注: このセクションで定義される複数の疑似クラスの適用条件を判定するために必要なヒットテストの詳細はまだ未定義ですが、将来定義されます。

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

:hover 疑似クラスは、ユーザーがポインティングデバイスで要素を指している間に適用されますが、必ずしもアクティブ化されている必要はありません。例えば、ビジュアルユーザーエージェントは、要素が生成するボックスにカーソル（マウスポインタ）が乗っているときにこの疑似クラスを適用できます。ハードウェア制限でホバーを検出できないインタラクティブユーザーエージェント（例：ホバー検出できないペンデバイス）でも適合となります。その場合、このセレクターはUAでは一致しません。

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

文書言語によっては、:hoverが一致する追加条件を定義している場合があります。例：[HTML5]では、ラベル付きコントロール要素はラベル要素がホバーされた場合に:hoverに一致します。

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

:hover疑似クラスは任意の疑似要素にも適用できます。

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

:active 疑似クラスは、ユーザーによって要素がアクティブ化されている間に適用されます。例えば、ユーザーがマウスボタンを押している間と離した瞬間の間です。複数のマウスボタンがあるシステムでは、:activeはプライマリボタン（通常は左ボタン）またはそのエイリアスにのみ適用されます。

どの要素が:activeになれるかは、文書言語や実装によって制限がある場合があります。例：[HTML5]ではアクティブ化可能な要素のリストが定義されています。

要素の:active一致は、フラットツリー内の子孫（テキストノード等の非要素ノードも含む）が上記条件を満たしていても成立します。

文書言語ごとに:activeが一致する追加条件を定義している場合があります。

注: 要素は:visitedと:active（または:linkと:active）の両方に一致することがあります。

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

:focus 疑似クラスは、要素がフォーカス（キーボードやマウスイベント、他の入力を受け付ける状態）を持っている間に適用されます。

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

文書言語によっては、:focusが一致する追加条件を定義している場合がありますが、 :focus疑似クラスが自動的に親要素へ伝播してはなりません（親要素への一致が必要な場合は:focus-withinを使用）。（他の仕組みで伝播させる場合は親要素にも適用できますが、親要素であるだけでは伝播しません。）

フォームコントロールから関連ラベル要素へ:focusを伝播させたいという著者からの要望がありますが、主な反対理由は実装の困難さのようです。 CSSWG issue (CSS)やWHATWG issue (HTML)参照。

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

:focus 疑似クラスは常に現在フォーカスを持つ要素に一致しますが、 UAはしばしば「フォーカスリング」の描画など、フォーカス表示を目に見える形で示す場合と、ユーザーに有益な場面だけに限定する場合があります。 :focus-visible疑似クラスは、そうした状況でのみフォーカスされた要素に一致し、著者がフォーカス表示の見た目だけを変えつつ、表示タイミング自体は変えずに済むようにします。

この例では、すべてのフォーカス可能要素は:focus-visible時に強い黄色のアウトラインを表示し、リンクは:focus-visible時にアウトラインと背景色の両方が黄色になります。これらのスタイルはページ全体で一貫しており、強調された見た目なので視認性が高いですが、必要な場面でのみ表示されます。

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

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

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

UAはフォーカス表示のタイミングを独自のヒューリスティックで決めてもよいですが、以下の（非規範的な）提案を参考に、現在フォーカスされた要素へのフォーカス表示のタイミングを決定できます：

ユーザーが常にフォーカス表示を見たいと希望した場合（システムやブラウザの設定など）、他の要因に関わらずフォーカス表示を行う。（UAが独自のフォーカス表示を著者スタイルに関わらず表示する選択肢もあり得る。）
要素がキーボード入力をサポートしている場合（例：inputなど、キーボードが無いとき仮想キーボードを表示する要素）、フォーカス表示を行う。
ユーザーがキーボードやポインティングデバイス以外で操作した場合はフォーカス表示を行う。（キーボード操作によって、この疑似クラスが一致するかどうかは変わることがあります。:focusには影響しません。）
ポインティングデバイス（マウス、タッチスクリーン等）で操作し、フォーカス要素がキーボード入力をサポートしない場合は、フォーカス表示を行わない。
前回フォーカスされた要素がフォーカス表示されていた場合、スクリプトでフォーカスが移動したら新しい要素にもフォーカス表示をする。

逆に、前回フォーカスされた要素がフォーカス表示されていなかった場合は、スクリプト移動後も新しい要素はフォーカス表示されない。

UAは:focus-visibleをデフォルトフォーカススタイル指定に使うべきです。そうすれば、著者が:focus-visibleを使う場合にデフォルト:focusスタイルを無効化する必要がありません。

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

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

10. 時間次元疑似クラス

これらの疑似クラスは、現在表示中またはアクティブなタイムライン上の位置に基づいて要素を分類します。たとえば、文書の音声レンダリング中や、WebVTTによる字幕表示付き動画の再生中などです。

CSSはこのタイムラインを定義しません。ホスト言語が定義する必要があります。要素にタイムラインが定義されていない場合、これらの疑似クラスは要素に一致してはなりません。

注: :current要素の祖先も:currentとなりますが、 :pastや:future要素の祖先は必ずしも:pastや:futureとは限りません。 1つの要素は最大で:current、:past、:futureのいずれか1つだけに一致します。

10.1. 現在要素疑似クラス：:current

:current 疑似クラスは、現在表示されている要素またはその祖先要素を表します。

その別形式:current()は、:is()のように、複合セレクターのリストを引数に取ります。引数に一致する:current要素、または一致しない場合はその最も内側の祖先が一致します（どちらも一致しなければ何にも一致しません）。

例：次の規則は、音声レンダリング中に読み上げられている段落やリスト項目をハイライトします：

:current(p, li, dt, dd) {
  background: yellow;
}

10.2. 過去要素疑似クラス：:past

:past 疑似クラスは、:current要素より完全に前に現れる要素を表します。たとえば、WebVTT仕様では:past疑似クラスをメディア要素の現在再生位置に関連して定義しています。文書言語で時間ベースの順序が定義されていない場合、:current要素の（間接的な）前方兄弟要素すべてを表します。

10.3. 未来要素疑似クラス：:future

:future 疑似クラスは、:current要素より完全に後に現れる要素を表します。たとえば、WebVTT仕様では:future疑似クラスをメディア要素の現在再生位置に関連して定義しています。文書言語で時間ベースの順序が定義されていない場合、:current要素の（間接的な）次方兄弟要素すべてを表します。

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

このセクションの疑似クラスは、主に画像や動画などロード済みリソースを表す要素に適用され、状態の質に基づいて選択できるようにします。

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

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

:paused 疑似クラスは、「再生」または「一時停止」可能な要素が「一時停止中」（つまり「再生中」ではない）時に一致します。（明示的な「一時停止」状態だけでなく、「ロード済みでまだ起動されていない」などの非再生状態も含みます。）

:seeking 疑似クラスは、「シーク」可能な要素が「シーク中」の時に一致します。（HTMLのaudioおよび video要素については HTML § 4.8.11.9 シーク参照。)

11.2. メディア読み込み状態：:buffering、:stalled疑似クラス

:buffering疑似クラスは、「再生」または「一時停止」可能な要素が、再生を継続できない理由としてメディアデータの取得を積極的に試みているが、再生再開に必要なデータをまだ取得できていない場合に一致します。（「バッファ中」でも「再生中」とみなされます。:bufferingが要素に一致する場合、:playingも一致します。）

:stalled 疑似クラスは、要素が再生を継続できない理由としてメディアデータの取得を積極的に試みているが、一定時間データを全く取得できていない場合に一致します。（HTMLのaudioおよび video要素はこの時間をメディア要素の停止タイムアウトとします。[HTML] :bufferingと同様、:stalledが一致する場合も:playingが一致します。)

11.3. サウンド状態：:muted、:volume-locked 疑似クラス

:muted 疑似クラスは、サウンドを再生できる要素が「ミュート」（強制消音）されている場合に一致します。（HTMLのaudioおよび video要素については、 muted参照。[HTML]）

:volume-locked疑似クラスは、サウンドを再生できる要素で、プログラム的にボリュームを変更しても実効メディア音量が変化しない場合に一致します。

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

12.1. 折りたたみ状態：:open、:closed疑似クラス

:open 疑似クラスは、「open」と「closed」両方の状態を持ち、現在「open」状態の要素を表します。

:closed 疑似クラスは、「open」と「closed」両方の状態を持ち、現在「closed」状態の要素を表します。

「open」と「closed」の意味はホスト言語依存ですが、例としてHTMLの detailsや select、 dialog 要素が挙げられます。どれも「open」にすると追加コンテンツが表示されます（dialogの場合は何も表示されないことも）。

注: 「open」や「closed」は意味的な状態です。現在表示されていない要素（たとえばvisibility: collapseが適用されている要素や display: noneサブツリーの要素）でも「open」状態であれば:openに一致します。

:modal 疑似クラスは、他の要素との操作を排除し、閉じるまで外部要素との操作ができない状態の要素を表します。複数の要素が同時に:modalになりえますが、そのうち1つだけがアクティブ（入力を受け付ける）です。

例：dialog 要素はshowModal() APIで開いた時にになります。同様に、:fullscreen要素もrequestFullscreen() APIで開いた場合はになります。これはページの他要素との操作を防ぐためです。

12.3. フルスクリーン表示状態：:fullscreen 疑似クラス

:fullscreen疑似クラスは、フルスクリーンAPIなどで、画面のほぼ全体（通常は全体）を使って表示されている要素を表します。[FULLSCREEN]

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

:picture-in-picture疑似クラスは、画面の一部に限定されたビューポートで他のコンテンツの上に表示される状態（Picture-in-Picture API利用時など）の要素を表します。[picture-in-picture]

13. 入力疑似クラス

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

13.1. 入力コントロールの状態

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

:enabled 疑似クラスは、ユーザーインターフェース要素で有効状態のものを表します。そのような要素は対応する無効状態も持っていなければなりません。

逆に、:disabled疑似クラスは、無効状態のUI要素を表します。そのような要素は対応する有効状態も持っていなければなりません。

何が有効・無効状態か、UI要素かはホスト言語依存です。典型的な文書では多くの要素は:enabledでも:disabledでもありません。例：[HTML5]では非disabledなインタラクティブ要素が:enabled、明示的にdisabledされたものが:disabledです。

注: ユーザーの操作可否に影響するCSSプロパティは:enabledや:disabledへの一致に影響しません。例：displayやvisibilityプロパティは、要素の有効／無効状態に影響しません。

13.1.2. 可変性疑似クラス：:read-only および :read-write

要素がユーザーによって変更可能であれば、:read-writeに一致します（文書言語で定義）。それ以外の場合は:read-onlyです。

例：[HTML5]では非disabledかつ非readonlyな<input>要素は:read-writeですし、contenteditable属性がtrue状態の要素もそうです。

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

入力要素は、ユーザーが何を入力すればよいかのヒントとしてプレースホルダー文字列を表示することがあります。例：[HTML5]のplaceholder属性。 :placeholder-shown疑似クラスは、属性・実際の要素・UAによる暗黙のいずれによって表示されている場合でも、そのようなプレースホルダー文字列が表示されている入力要素に一致します。

例： [HTML]のセマンティクスによれば、 placeholder 属性を持つ input 要素や、 option 要素が select の最初の要素の場合など、プレースホルダー文字列を提供します。 :placeholder-shown疑似クラスは、そのような文字列が表示されているとき適用されます。

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

:autofill疑似クラスは、ユーザーエージェントによって自動入力されたが、ユーザーによって変更されていない入力要素を表します。

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

:default 疑似クラスは、同種の要素セットの中でデフォルトとなるUI要素（1つ以上）に適用されます。通常、コンテキストメニュー項目、ボタン、セレクトリスト／メニューなどに適用されます。

例：一連のボタンのうちデフォルト送信ボタン、ポップアップメニューのデフォルト選択肢など。セレクト複数選択グループ（ピザのトッピングなど）では複数要素が:defaultに一致します。例：[HTML5]では:defaultは、フォームの「デフォルトボタン」、 <select>の初期選択<option>（複数可）、その他いくつかの要素に一致します。

13.2. 入力値の状態

13.2.1. 選択オプション疑似クラス：:checked

ラジオボタンやチェックボックス要素はユーザーにより切り替え可能です。一部のメニュー項目は選択されると「チェック」状態になります。そのような要素が「オン」になると:checked疑似クラスが適用されます。例：[HTML5]ではチェックされたチェックボックス・ラジオボタン・選択された<option>要素が:checkedに一致します。

:checked疑似クラスは動的でユーザー操作で変化しますが、 selectedやchecked属性など文書上のセマンティック属性にも基づくため、すべてのメディアに適用されます。

未チェックのチェックボックスは否定疑似クラスで選択できます：

input[type=checkbox]:not(:checked)

13.2.2. 不定値疑似クラス：:indeterminate

:indeterminate疑似クラスは、値が不定状態のUI要素に適用されます。例：ラジオボタンやチェックボックスはチェック・未チェック以外に不定状態になることがあり、進捗メーターも進捗率不明の場合に不定状態になります。例：[HTML5]ではチェックボックスが:indeterminateに一致する方法が定義されています。

:checkedと同様、:indeterminateはすべてのメディアに適用されます。初期選択肢なしで初期化されたラジオグループの構成要素などは、静的表示でも:indeterminateとなります。

13.3. 入力値の検証

13.3.1. 空値疑似クラス：:blank

:blank 疑似クラスは、ユーザー入力要素の入力値が空（空文字列またはnull入力）である場合に適用されます。

:blankユーザー入力要素の例は、 textarea 要素の内容が空の場合や、 input フィールドの値が空の場合です。ここで検証される値は送信時に使われる値（フォームコントロールの値参照）であり、 HTMLでは要素の value 属性の値と必ずしも一致しません。

注: このセレクターはリスクがあります。

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

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

注: 制約がない要素は常に:validとなりますが、データ妥当性セマンティクスが全くない要素は:validや:invalidのいずれにも一致しません。例：HTMLでは、<input type="text">要素は制約がなければ常に:validですが、 p要素は妥当性セマンティクスがないため、どちらにも一致しません。

13.3.3. 範囲疑似クラス：: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」なら:out-of-rangeとなります。

13.3.4. 任意性疑似クラス：:required および :optional

フォーム要素は、値が必須か任意かによって:requiredまたは:optionalとなります（フォームの有効な送信に必要かどうか）。フォーム要素でないものはどちらにもなりません。

13.3.5. ユーザー操作疑似クラス：:user-valid および :user-invalid

:user-invalidおよび:user-valid疑似クラスは、それぞれユーザーが正しくない／正しい入力をした要素を表します。ただしユーザーが十分に操作した後のみです。

:user-invalid疑似クラスは、:invalid、:out-of-range、または blankかつ:required要素で、ユーザーがフォーム送信を試みた後、再度フォーム要素へ操作するまで一致します。

:user-valid疑似クラスは、ユーザーがフォーム送信を試みた後、再度フォーム要素へ操作するまで:valid要素に一致します。

UAは、ユーザーへのエラー強調など適切な場面で、他のタイミングでもこれら疑似クラスが一致することを許容してもよいです。例：UAは、ユーザーが入力を変更して他要素にフォーカスした時点で:user-invalidを:invalid要素に一致させ、入力が正しく修正された時点で一致しなくすることもできます。

例：以下の文書断片の入力は、ページロード時点で:invalidに一致します（初期値が最大値制約を違反しているため）、ただしユーザーが十分に操作した後やフォーム送信を試みるまで:user-invalidには一致しません。

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

:-moz-ui-invalidとクロスチェックすること。

:dirty疑似クラスを評価すること

本疑似クラス（および:invalid/:valid）がformやfieldset要素に適用可能であることを明確化すること。

14. ツリー構造擬似クラス

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

親要素の子リスト内で要素の位置を計算する際、独立したテキストや他の非要素ノードは考慮されません。親の子リスト内で要素の位置を計算する際、インデックス番号は1から始まります。

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

14.1. :root 擬似クラス

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

例えば、DOM文書の場合、 :root 擬似クラスは Document オブジェクトのルート要素にマッチします。 HTMLでは、これはhtml要素となります（スクリプトで文書が変更されていない限り）。

14.2. :empty 擬似クラス

:empty 擬似クラスは、要素が子要素を持たず、オプションで文書の空白文字だけを含む場合を表します。文書ツリーの観点では、要素ノードやコンテンツノード（[DOM] のテキストノードやエンティティ参照など）のデータが非ゼロ長の場合のみ、空でないと見なされます。コメントや処理命令、その他のノードは要素が空かどうかの判定に影響しません。

例： p:empty は、次のHTML断片における p 要素を正しく表します：

<p></p>
<p>
<p> </p>
<p></p>

div:empty は、次の断片の <div> 要素には該当しません：

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

注: セレクターのレベル2およびレベル3では、:empty は空白のみの要素にはマッチしませんでした。この仕様では変更されました。—HTMLでは空白がほぼ折り畳まれるためソースコード整形に使用されることが多く、特に終了タグが省略される要素では DOMのテキスト内容にそのような空白が吸収されがちです—著者が空と認識する要素をこのセレクターで選択できるようになっています。

14.3. 子インデックス擬似クラス

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

注: Selectors 3では、これらのセレクターは親の子リスト内のインデックスに基づいて選択すると記載されていました。（この説明はセクション名やいくつかの擬似クラス名に残っています。）親を持たない要素や非要素の親でもマッチ対象から除外する理由がないため、現在は兄弟間の相対的なインデックスに基づくものとして表現されています。

14.3.1. :nth-child() 擬似クラス

:nth-child(An+B [of S]? ) 擬似クラス記法は、 An+B 番目の要素である要素を表します。これは、包括的兄弟のうち、セレクターリスト S にマッチする要素のリストから選択されます。 S は <complex-selector-list> であり、許容的セレクターリストとしてパースされます。 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）は、単一擬似クラスの詳細度に加え、 S が指定されている場合は S 内で最も詳細度の高い複合セレクターの詳細度が加算されます。詳しくは§ 17 セレクターの詳細度の計算を参照してください。したがって S:nth-child(An+B) と :nth-child(An+B of S) は詳細度は同じですが、挙動は異なります（下記の例参照）。

セレクター引数を渡すことで、そのセレクターにマッチするN番目の要素を選択できます。例えば、次のセレクターは「important」クラスが付いた最初の3つのリスト項目にマッチします：

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

セレクターを関数の外に置いた場合とは異なります：

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

このセレクターは「重要な」リスト項目で、かつ最初の3つの子の場合のみ選択します。

セレクター引数の例をさらに示します。テーブルの縞模様（ゼブラストライプ）を正しく適用するためのものです。

通常、テーブルの行に縞模様をつけるには次のようなCSSを使います：

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

しかし、行の一部が非表示（displayされない）だと、パターンが崩れてしまい、同じ背景色の行が隣接することがあります。 HTMLで [hidden] 属性を使って行を非表示にすると仮定すると、次のCSSは隠された行の有無にかかわらず正しく縞模様を維持します：

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

14.3.2. :nth-last-child() 擬似クラス

:nth-last-child(An+B [of S]? ) 擬似クラス記法は、 An+B 番目の要素（リストの末尾から逆順で）を表します。これは、包括的兄弟のうち、セレクターリスト S にマッチする要素のリストから選ばれます。 S は <complex-selector-list> であり、許容的セレクターリストとしてパースされます。 S を省略した場合、デフォルトは *|* です。

注: :nth-last-child() 擬似クラスの詳細度も :nth-child() 擬似クラスと同様に、通常の擬似クラスの詳細度とセレクター引数 S の詳細度を組み合わせます。詳しくは§ 17 セレクターの詳細度の計算を参照してください。

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

例：

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

foo:nth-last-child(odd)    /* 親要素内で末尾からカウントした奇数番目のfoo要素全て */

14.3.3. :first-child 擬似クラス

:first-child 擬似クラスは、包括的兄弟の中で最初の要素である場合にマッチします。 :nth-child(1) と同じです。

例：次のセレクターは p 要素が div 要素の最初の子である場合にマッチします：

div > p:first-child

このセレクターは以下の断片の div 内の p にマッチします：

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

ただし、次の断片の2つ目の p にはマッチしません：

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

次の2つのセレクターは通常同等です：

* > a:first-child /* a が任意の要素の最初の子 */
a:first-child /* 同じ（aがルート要素でない場合） */

14.3.4. :last-child 擬似クラス

:last-child 擬似クラスは、包括的兄弟の中で最後の要素である場合にマッチします。 :nth-last-child(1) と同じです。

例：次のセレクターは、順序付きリスト ol の最後の子であるリスト項目 li を表します。

ol > li:last-child

14.3.5. :only-child 擬似クラス

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

14.4. 型付き子インデックス擬似クラス

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

14.4.1. :nth-of-type() 擬似クラス

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

CSS例：画像の左右の配置を交互にする場合：

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) と同等です。

14.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 名前空間が宣言されている場合）。

例： XHTML body の h2 のうち、最初と最後以外の要素を表すセレクター：

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

この場合、 :not() を使うこともできますが、セレクターの長さはほぼ同じです：

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

14.4.3. :first-of-type 擬似クラス

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

例：次のセレクターは定義リスト dl 内の定義タイトル dt で、親要素の子リストの中で最初の dt を表します。

dl dt:first-of-type

これは次の例の最初の2つの dt 要素にはマッチしますが、3つ目にはマッチしません：

<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>

14.4.4. :last-of-type 擬似クラス

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

例：次のセレクターは、テーブルの行 tr の最後のデータセル td を表します。

tr > td:last-of-type

14.4.5. :only-of-type 擬似クラス

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

15. コンビネータ

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

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

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

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

例: 次のセレクターを考えます：

h1 em

これは、em 要素が h1 要素の子孫である場合に該当します。これは次の断片の正しい部分的な記述です：

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

次のセレクター：

div * p

これは、p 要素が div 要素の孫以降の子孫である場合に該当します。「*」の両側の空白はユニバーサルセレクターの一部ではなく、空白はコンビネータであり、div が何らかの要素の祖先であり、その要素が p の祖先であることを示します。また、次のセレクターは子孫コンビネータと属性セレクターを組み合わせており、(1) href 属性が設定された要素で、(2) div 内の p の内側にあるものを表します：

div p *[href]

15.2. 子コンビネータ (`>`)

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

例: 次のセレクターは p 要素が body の子である場合を表します：

body > p

次の例は子孫コンビネータと子コンビネータを組み合わせています。

div ol>li p

これは、p 要素が li 要素の子孫であり、li 要素が ol 要素の子であり、ol 要素が div の子孫であることを表します。「>」コンビネータの周囲の空白は省略されています。

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

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

隣接兄弟コンビネータは、「プラス」記号（U+002B、+）で構成され、 2つの複合セレクターを区切ります。 2つの複合セレクターで表される要素は文書ツリー内で同じ親を持ち、最初の複合セレクターで表される要素が、 2番目の要素の直前に位置します。要素の隣接を判断する際、非要素ノード（例：要素間のテキスト）は無視されます。

例: 次のセレクターは p 要素が math 要素の直後にある場合を表します：

math + p

次のセレクターは、前の例と似ていますが、属性セレクターを追加しています。h1 要素に class="opener" がある場合のみ次の h2 要素にマッチします：

h1.opener + h2

15.4. 一般兄弟コンビネータ (`~`)

一般兄弟コンビネータは、「チルダ」（U+007E、~）で構成され、 2つの複合セレクターを区切ります。 2つの複合セレクターで表される要素は文書ツリー内で同じ親を持ち、最初の複合セレクターで表される要素が（必ずしも直後ではなく）2番目の要素の前に位置します。

h1 ~ pre

これは pre 要素が h1 の後に続く場合を表します。これは次の断片の正しい部分的な記述です：

<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>

16. グリッド構造セレクター

2次元グリッドにおけるセルの二重関連（行と列への関連）は、階層型マークアップ言語の親子関係だけでは表現できません。これらのうち一方の関連のみが階層的に表現可能であり、もう一方は文書言語のセマンティクスによって明示的または暗黙的に定義する必要があります。 HTMLやDocBookなど、代表的な階層型マークアップ言語では、マークアップは行優先（行の関連が階層的に表現される）であり、列は暗黙的に推測されます。このような暗黙的な列ベースの関係を表現できるよう、列コンビネータおよび:nth-col()や:nth-last-col()擬似クラスが定義されています。列優先フォーマットでは、これらの擬似クラスは行関連に対してマッチします。

16.1. 列コンビネータ (`||`)

列コンビネータは、パイプ2つ（||）で構成され、列要素と、その列に属するセル要素との関係を表します。列の所属は文書言語のセマンティクスのみに基づいて判断されます：要素がどのように表示されるかは考慮されません。セル要素が複数の列に属する場合、それらのいずれかの列への所属を示すセレクターで表されます。

次の例では、セルC, E, Gを灰色にします。

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

16.2. :nth-col() 擬似クラス

:nth-col(An+B) 擬似クラス記法は、An+B-1 列が前にある列に属するセル要素を表します（nは0以上の整数）。列の所属は文書言語のセマンティクスのみに基づいて判断されます：要素の表示方法は考慮されません。セル要素が複数の列に属する場合、それらのいずれかの列への所属を示すセレクターで表されます。

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

16.3. :nth-last-col() 擬似クラス

:nth-last-col(An+B) 擬似クラス記法は、An+B-1 列が後ろにある列に属するセル要素を表します（nは0以上の整数）。列の所属は文書言語のセマンティクスのみに基づいて判断されます：要素の表示方法は考慮されません。セル要素が複数の列に属する場合、それらのいずれかの列への所属を示すセレクターで表されます。

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

17. セレクターの詳細度（specificity）の計算

セレクターの詳細度は、対象要素ごとに以下の手順で計算します:

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

セレクターがセレクターリストの場合、この値はリスト内の各セレクターごとに計算します。リストに対するマッチ判定処理では、実際にマッチしたセレクターのうち最も詳細度が高いものの値が有効となります。

一部の擬似クラスは他のセレクターの「評価コンテキスト」を提供するため、詳細度が特別に定義されています:

:is()、:not()、:has() 擬似クラスの詳細度は、引数である複合セレクターのうち最も詳細度が高いものの値に置き換えられます。
同様に、:nth-child() や :nth-last-child() の詳細度は、擬似クラス自身の詳細度（擬似クラスセレクター1個分）に加えて、引数である複合セレクターのうち最も詳細度が高いものの値（存在する場合）を加算します。
:where() 擬似クラスの詳細度はゼロに置き換えられます。

例:

:is(em, #foo) は詳細度 (1,0,0) — IDセレクター（#foo）と同様 — <em>, <p id=foo>, <em id=foo> のいずれでもマッチした場合。
.qux:where(em, #foo#bar#baz) は詳細度 (0,1,0): .qux のみが詳細度の計算に寄与し、:where() 内は寄与しません。
:nth-child(even of li, .item) は詳細度 (0,2,0) — クラスセレクター（.item）1個分と擬似クラス1個分 — <li>, <ul class=item>, <li class=item id=foo> のいずれでもマッチした場合。
:not(em, strong#foo) は詳細度 (1,0,1) — タグセレクター（strong）とIDセレクター（#foo）の組み合わせ — 任意の要素にマッチした場合。

詳細度は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]

18. 文法（Grammar）

セレクターは以下の文法に従ってパースされます:

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

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

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

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

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


<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

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

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

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


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

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

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

<wq-name> = <ns-prefix>? <ident-token>

<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>

上記の文法を解釈する際、下記のルールが適用されます:

空白は禁止:
- <compound-selector> の最上位要素間（例えば <type-selector> と <subclass-selector> の間や、 <subclass-selector> と <pseudo-element-selector> の間など）で禁止。
- <type-selector>や <class-selector>の構成要素の間で禁止。
- <pseudo-element-selector>や <pseudo-class-selector>の「:」や「:」と<ident-token>または <function-token>の間で禁止。
- <wq-name>の構成要素の間で禁止。
- <attr-matcher>の構成要素の間で禁止。
- <combinator>の構成要素の間で禁止。
2つの<compound-selector>間で <combinator>が省略された場合は、空白が必須になります。（つまり子孫コンビネータが使われていることを示す）。
4つのLevel 2 疑似要素（::before, ::after, ::first-line, ::first-letter) は、後方互換のため <pseudo-class-selector>文法で冒頭の「:」1文字だけで表現することも可能です。
<id-selector>において、 <hash-token>の値は識別子でなければなりません。

注: セレクターにはさらに特定の構文制約があり、上記の文法を満たすだけでは有効なセレクターとは限りません。詳しくは§ 3.9 無効なセレクターとエラー処理を参照してください。

注: 一般的に <pseudo-element-selector>は <complex-selector>の最後の<compound-selector>の末尾にのみ有効です。ただし状況によっては、さらに <pseudo-element-selector>や <pseudo-class-selector>が続くこともあります。（例えばユーザーアクション擬似クラスは任意の疑似要素の後ろに置けますし、ツリー順守型疑似要素は ::slotted()疑似要素の後ろに置けます。)

18.1. <forgiving-selector-list> および <forgiving-relative-selector-list>

後方互換の理由により、セレクターリストの一般的な動作はリスト内のいずれかのセレクターのパースに失敗した場合（新しいセレクターやUA固有のセレクター機能などを使った場合）セレクターリスト全体が無効となります。そのため、新しいセレクターを使いつつ古いユーザーエージェントでも正しく動作するCSSを書くのが困難になる場合があります。

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

注: スタイル規則は通常、通常通りの（厳格な）セレクターリスト動作を使います。<forgiving-selector-list>は一部の関数（:is()など）で使われます。詳細度への影響はわずかですが、スタイル規則のセレクターを :is() で包むことで事実上「許容型」にアップグレードされます。

構文的には、<forgiving-selector-list>は <any-value>?と同等です。その後、許容型セレクターリストとしてパースして実際の値を取得します。

許容型セレクターリストとしてパースする手順（input に対して）:

リストをパースして <complex-selector>のリストを得て、 selector list とする。
selector listから、パースに失敗した項目と無効なセレクターをすべて除去し、残った項目でselector listを構成。そのselector listを表す <selector-list>を返す（空の場合もあり得る）。

<forgiving-relative-selector-list> は <forgiving-selector-list>と同じですが、構成要素を<relative-selector>としてパースする点のみ異なります（<complex-selector>としてではなく）。

19. APIフック

Selectorsの概念を利用する仕様の記述を支援するため、このセクションでは他の仕様から呼び出せるいくつかのAPIフックを定義します。

matchやinvalid selectorの定義が厳密になった今、これらはまだ必要でしょうか？名詞の調整は述語よりもはるかに容易であり、 querySelectorから返される要素の順序のような詳細はDOM仕様で定義する方がSelectorsより適切だと思われます。

19.1. セレクターをパースする

このセクションでは、文字列 source からセレクターをパースする方法を定義します。複合セレクターリストまたは失敗（failure）を返します。

selector をパースして <selector-list> とする。失敗した場合は、 invalid selectorとみなし、 failureを返す。
selectorが他の理由（例えば未宣言の名前空間プレフィックスを含むなど）でinvalid selectorの場合も、 failureを返す。
それ以外の場合は、selectorを返す。

19.2. 相対セレクターをパースする

このセクションでは、文字列 source から相対セレクターをパースする方法を定義します。複合セレクターリストまたは失敗（failure）を返します。

selector をパースして <relative-selector-list> とする。失敗した場合は、 invalid selectorとみなし、 failureを返す。
selectorが他の理由（例えば未宣言の名前空間プレフィックスを含むなど）でinvalid selectorの場合も、 failureを返す。
それ以外の場合は、selectorを返す。

19.3. セレクターを要素にマッチさせる

このセクションではセレクターを要素にマッチさせる方法を定義します。

このアルゴリズムを利用するAPIはselectorとelementを指定する必要があります。

呼び出し側はオプションで以下を指定できます:

一つ以上のスコープルート（:scope擬似クラスの解決用）

このアルゴリズムは成功または失敗を返します。

与えられたselector（複合セレクターのリストとみなす）内の各複合セレクターについて、以下の段落で説明する方法でelementに対してマッチを試みます。いずれかの複合セレクターで成功した場合は成功を返し、すべて失敗した場合は失敗を返します。

複合セレクターを要素にマッチさせるには、複合セレクターごとに右から左の順で処理します。この処理は再帰的に以下の通り定義されます:

右端の複合セレクター内の単純セレクターのいずれかが要素にマッチしなければ、失敗を返す。
それ以外で、複合セレクターが1つだけなら成功を返す。
それ以外の場合、この要素に右端のコンビネータによって関係する可能性のあるすべての要素について考える。この複合セレクターから右端の複合セレクターと右端のコンビネータを除いたセレクターで、これら要素のいずれかに対してマッチ処理が成功すれば成功を返し、そうでなければ失敗を返す。

19.4. セレクターを疑似要素にマッチさせる

このセクションではセレクターを疑似要素にマッチさせる方法を定義します。

このアルゴリズムを利用するAPIはselectorとpseudo-elementを指定する必要があります。オプション引数はセレクターを要素にマッチさせるアルゴリズムと同じく指定可能です。

このアルゴリズムは成功または失敗を返します。

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

複合セレクターの右端の単純セレクターがpseudo-elementにマッチすること
残りの複合セレクター（右端の単純セレクターを除いたもの）・pseudo-elementの該当要素・本アルゴリズムへのオプション引数で複合セレクターを要素にマッチさせる実行結果が成功であること

成功を返す。

それ以外の場合（つまりselector内の複合セレクターで上記が成立しない場合）は失敗を返す。

19.5. セレクターをツリーにマッチさせる

このセクションではセレクターをツリーにマッチさせる方法を定義します。

このアルゴリズムを利用するAPIはセレクターと、一つ以上のroot elements（セレクターで検索するサブツリーを示す）を指定する必要があります。すべてのroot elementsは同じルートを持つ必要があります。そうでなければ本アルゴリズムの呼び出しは無効です。

オプションで以下を指定可能です:

セレクターがスコープ付きであることを示す一つ以上のスコープルート
マッチリストに現れることが許可される疑似要素のリスト。指定しない場合は全ての疑似要素が許可されます。
実際にはツリー順守型疑似要素だけがこうした扱いを受けます。

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

candidate elementsのリストを開始する。これはroot elementsとそのすべての子孫要素で、シャドウツリー順序でソートされる（特に指定がない限り）。
スコープルートが指定された場合、 candidate elementsからいずれのスコープルートの子孫でない要素を除外する。
selector match listを空で初期化する。
candidate elementsの各elementについて:
1. セレクターを要素にマッチさせる結果が成功なら、 elementをselector match listに追加する。
2. elementに関連付けられ、マッチリストに含めることが許可されたすべての疑似要素について、セレクターを疑似要素にマッチさせる結果が成功ならその疑似要素をselector match listに追加する。
  selector match list内の疑似要素の相対位置は未定義です。この情報を公開する文脈はまだありませんが、将来的に公開前に何か決める必要があります。

付録A: ソース文書やデータを要素ツリーにマッピングする指針

このセクションは参考情報です。

DOMで記述される要素ツリー構造は強力かつ有用ですが、ツリー型データ（あるいは適切な解釈をすればグラフ型データ）を記述するあらゆる言語をモデリングできるほど汎用的です。

HTMLのような一部言語は、リソースからDOMオブジェクトを生成する手順がすでに定義されています。特定の言語にそうした手順がない場合は、 Selectorsをその言語の文書に適用するために手順を定義する必要があります。

最低限、文書言語はDOMの「要素」概念に対応するものが何かを定義しなければなりません。

ノード間の主な一対多関係——ツリー構造では親子、グラフ構造では要素と近傍——は要素の子ノードとして反映されるべきです。

要素の他の特徴も DOMの同種機能に似たものにマッピングされるべきです:

type: 文書言語の要素が「型」という概念を持つ場合、異なるグループ区別の基本となる「型」は "type" 機能として反映するべきです。
この「型」が「基本名」と「名前空間」に分離可能なら後者は"namespace"機能として反映し、そうでなければ"namespace"機能は持たず、名前全体を"type"機能として反映します。
id: 要素のある側面が文書内でユニークな識別子として機能する場合、 "id"機能にマッピングします。
注: HTMLでは要素は1つのIDしか持てませんが、これは一般的な制限とみなすべきではありません。 IDの重要な性質は、各IDが1つの要素に対応することです。 1つの要素が複数のIDを持つことは有効です。
classes and attributes: 要素の側面で、その要素の識別に有用だが文書内で一般的に一意ではないものは "class"または"attribute"機能にマッピングすべきです。「ラベル」（単独の文字列）に相当するなら"class"、「プロパティ」（名前/値のペア）に相当するなら"attribute"です。
pseudo-classes and pseudo-elements: 要素がいずれかの擬似クラスにマッチしたり、疑似要素を持つ場合はそれを明示的に定義する必要があります。
一部の擬似クラスは*構文的*で :has()や :is()などは常に動作すべきです。どこかでこれを示す必要があります。構造擬似クラスは子リストが順序付けられている場合常に動作するはずです。

例：JSONSelectはセレクターによって JSON文書から情報を抽出するライブラリです。

JSON文書の「要素」は各配列・オブジェクト・真偽値・文字列・数値・nullです。配列やオブジェクトはその内容が子ノードとなります。
各要素の型はJSの型名（"array"、"object"など）です。
オブジェクトの子はそのキーをクラスとして持ちます。
配列の子は:first-child、:nth-child()などの擬似クラスにマッチします。
ルートオブジェクトは:rootにマッチします。
さらに、特定値や部分文字列にマッチするための :val() や :contains() 擬似クラスも定義されています。

この構造により、セレクターによるJSON文書の強力かつコンパクトなクエリが可能になります。

付録B: Web互換のために必要だが廃止された`-webkit-`パースのクセ

この付録は規範的です。

Web互換のレガシー制約により、 Web文書のパースを想定するユーザーエージェントは以下の機能をサポートしなければなりません:

:-webkit-autofillはレガシーセレクターエイリアスとして :autofillとして扱わなければなりません。
その他すべての「-webkit-」で始まる疑似要素（ASCII大小区別なしで一致し、関数記法でないもの）はパース時に有効として扱わなければなりません。（つまり ::-webkit-asdf はパース時に有効ですが、::-webkit-jkl() はそうではありません。）もし他に認識・サポートされていない場合は、何にもマッチしないものとして扱い、未知の-webkit-疑似要素とします。

未知の-webkit-疑似要素はASCII小文字でシリアライズしなければなりません。

このクセの目的は？

Selectorsは長らく、未知・無効なセレクターが1つでもあるとセレクターリスト全体が無効となる挙動でした（個々の複合セレクターだけでなく）。これはWGでもレガシーミスと考えられていますが、あまりに多くのスタイルシートがこの挙動に依存しているため今や修正不可能です。

これの一側面は、ベンダー固有セレクターの利用が他のUAではセレクター全体を無効化し、規則全体が効果を失うことです。これは意図的にも使われてきました — 他UAで規則を隠すために無効化する手法や、意図せずベンダー固有疑似要素（input関連など）と通常の要素両方にスタイルを指定し他のUAで規則全体が隠れてしまう例があったためです。

加えて、WebKit系UA（SafariやChromeなど）はベンダープレフィックス疑似要素に関してさらに「::-webkit-」で始まる全てのセレクターをパース時に有効扱いするクセがあります。（これは作者定義疑似要素を導入するCSS初期機能の名残と思われます。）

他のレガシー癖（[QUIRKS]参照）同様、このベンダー固有の挙動はあまりに普及しすぎたため他UAでもサイトが壊れる事例が増えており、実質的には現代Webの正しく描画のために必須なため、規定して全UAで要求することで現在および将来のUAでもWebページが正しく描画されやすくなります。

ただし、こうした癖に意図的に依存するWebページは CSSWGや正気のWeb開発者から嘲笑と非難を受けるでしょう。

20. 変更点

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

2022年5月7日作業草案以降の主な変更点:

:open と :closed 擬似クラスを追加。 (Issue 7319)
疑似要素が:has()内で許可されるのは疑似要素の定義で明示的に許可された場合のみとした。 (Issue 7463)
:has()のネストを禁止。 (Issue 7344)
::lang("") や言語タグ未指定要素のマッチ動作を定義。 (Issue 6915)
「スコープ付き」セレクターと「相対」セレクターの概念を完全に分離。 (Issue 6399)
- 「セレクターの絶対化」も削除し、相対セレクターのマッチはアンカー要素基準で定義。
:nth-child()の複合セレクター制限を元に戻した。 (Issue 3760)
:-webkit-autofillのレガシーセレクターエイリアスを定義。 (Issue 7474)

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

2018年11月21日作業草案以降の主な変更点:

セレクタープロファイルを削除し、:has()をオプションかつリスクありとした。 (Issue 3925)
§ 3.6.4 サブ疑似要素を追加し、サブ疑似要素と関連用語を定義。
: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を追加。 (議論)
:is()、:where()、:has()、:nth-child()、:nth-last-child()が無効なセレクターを含んでも自身が無効化されないよう定義。 (Issue 3264)
:nth-child()と:nth-last-child()内のセレクターを現状では複合セレクターに制限。 (Issue 3760)
大文字小文字厳密な文字列比較について、[INFRA]で定義される文字列同一性を参照して明確化。
UA提供のプレースホルダーテキストも:placeholder-shownをトリガーすることを明確化。
:focus-visibleの定義を明確化のため書き直し。
文法セクションの注意書きを規範テキストに切り替え、 <compound-selector>間で <combinator>トークンがない場合は空白必須であることを記述。

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

2018年2月2日作業草案以降の主な変更点:

ゼロ詳細度セレクターに:where()の名称を付与。 (Issue 2143)
:matches()を:is()に名称変更。 (Issue 3258)
:emptyを空白ノードのみを無視するよう再定義。 (Issue 1967)
:blankを要素の空でなく、ユーザー入力の空を表すよう再定義。 (Issue 1283)
:is()、:has()、:nth-child()の詳細度がどのセレクター引数がマッチしたかに依存しないよう変更。 (Issue 1027)
:drop()擬似クラスをHTML側で関連機能が削除されたため除外。 (Issue 2257)
属性セレクターに大文字小文字厳密フラグ s を追加。 (Issue 2101)
:focus-visibleに関する追加ガイダンス。
付録B: Web互換のために必要だが廃止された-webkit-パースのクセを追加し、 ::-webkit-疑似要素のパース癖を定義。 (Issue 3051)
文法ルールの空白許容箇所について明確化のため書き直し。（§ 18 文法参照）

20.4. 2013年5月2日作業草案以降の変更点

2013年5月2日作業草案以降の主な変更点:

:target-within、:focus-within、:focus-visible、:playing、:paused 擬似クラスを追加。
ゼロ詳細度の:matches()型擬似クラスを追加（名称未定）。
主語インジケータ（!）機能を:has()に置換。
:nth-match()と:nth-last-match()セレクターを :nth-child(… of selector)と:nth-last-child(… of selector)に置換。
:active-drop-target、:valid-drop-target、:invalid-drop-targetを:drop()へ変更。
空または空白のみのセレクターを検討用に追加（未解決issue参照）。
:user-errorを:user-invalidに名称変更。（議論参照）
:nth-column()/:nth-last-column()を:nth-col()/:nth-last-col()に名称変更。
:local-link()擬似クラスが末尾のスラッシュを無視するよう変更。
:local-link()擬似クラスの関数形式とリファレンスコンビネータは関心不足のため削除。
セレクター文法をCSS値定義構文で書き直し。
相対セレクターの定義をスコープ付きセレクターから分離。
<An+B> マイクロ構文の定義をCSS Syntaxに移動。
意味定義は本仕様に戻すべき？
新しいセクションを追加:
- § 3.2 データモデル
  XML用ツリー定義が必要。
- § 19 APIフック
  - 以前の版ではセレクター評価セクションがあったが現在は未収載。その参照はセレクターをツリーにマッチさせるアルゴリズムを参照すべき。
:matches()や :not()内のコンビネータ制限を削除; 議論参照。
詳細度のセレクターリストの定義を追加。（理由は？）
:lang()値でアスタリスクを含む場合はクォート必須に; CSS識別子として使える言語コードのみクォート不要。

注: 2018年2月1日草案には未完成作業の誤コミットが含まれていたが、 2月2日版でこれを元に戻し（ついでにリンクも修正）。

20.5. 2012年8月23日作業草案以降の変更点

2012年8月23日作業草案以降の主な変更点:

:placeholder-shown擬似クラス追加。
:matches()や:not()の制限を一部緩和。
高速・完全セレクタープロファイル（現「ライブ」「スナップショット」）を定義。
詳細度の定義を改善し、:matches()対応。
文法更新。
<An+B> 記法の定義整理。
スコープ相対セレクター定義を追加し、scope-constrainedをscope-filteredへ変更。
:local-link()擬似クラスが末尾スラッシュを無視するように変更。

20.6. 2011年9月29日作業草案以降の変更点

2011年9月29日作業草案以降の主な変更点:

RFC 4647による言語バリアント対応追加。
スコープ付きセレクター追加。
:user-error（現:user-invalid）追加。
:valid-drop-target追加。
列コンビネータを二重スラッシュから二重パイプへ変更。

20.7. Level 3以降の追加点

Level 3以降の追加点:

:not()がセレクターリストを受け付けるよう拡張。
:is()、:where()、:has()追加。
:scope追加。
:any-link、:local-link追加。
時間次元擬似クラス追加。
:target-within、:focus-within、:focus-visible追加。
:dir()追加。
:lang()をワイルドカードや言語コードリスト対応に拡張。
:nth-child()がセレクターリストを受け付けるよう拡張。
CSS UI Level 3由来のinputセレクター統合し、 :indeterminateを追加。
:blank、 :user-invalid追加。
グリッド構造（列）セレクター追加。
属性値一致に大文字小文字非区別/区別フラグ追加。

21. 謝辞

CSSワーキンググループは、過去のSelectors仕様に貢献くださった皆様に感謝を申し上げます。これらの仕様は本仕様の基礎となっています。特にSelectors Level 4への具体的な貢献者として L. David Baron、 Andrew Fedoniouk、 Daniel Glazman、 Ian Hickson、 Grey Hodge、 Lachlan Hunt、 Anne van Kesteren、 Jason Cranford Teague、 Lea Verou に特別な謝意を表します。

22. プライバシーとセキュリティの考慮事項

この仕様は以下のプライバシーおよびセキュリティ上の考慮事項を導入します:

:visited擬似クラスは、 UAがスクリプトからどの要素がマッチしているかの情報を漏洩しないよう注意しない限り、ユーザーが過去に訪れたサイトの情報を漏洩する可能性があります。
:autofill擬似クラスはユーザーが以前このフォームに操作したかどうかを漏洩する可能性がありますが、同じ情報はフォームの入力速度を観察することで得られます。

適合性

文書の慣例

適合性要件は記述的な断言とRFC 2119の用語を組み合わせて表現されます。主要な語句「MUST」, 「MUST NOT」, 「REQUIRED」, 「SHALL」, 「SHALL NOT」, 「SHOULD」, 「SHOULD NOT」, 「RECOMMENDED」, 「MAY」, 「OPTIONAL」は、この文書の規範部分ではRFC 2119に記載の通り解釈されます。ただし、可読性のため、この仕様ではこれらの語句はすべて大文字で表記されていません。

この仕様の全ての文は、明示的に非規範的と記載されたセクション・例・注釈を除き、規範的です。[RFC2119]

この仕様の例は「例えば」という語で始まるか、class="example"のように規範テキストから区別されます:

参考注釈は「注:」で始まり、class="note"で規範テキストから区別されます:

助言は規範的なセクションで特別な注意を促すようにスタイルされており、他の規範テキストと区別して<strong class="advisement">で表示されます: UAはアクセシブルな代替手段を必ず提供しなければなりません。

適合性クラス

この仕様への適合性は、3つの適合性クラスで定義されます:

スタイルシートがこの仕様に適合するためには、本モジュールで定義されている構文を使った全ての文が、汎用CSS文法および各機能ごとの個別文法に従って有効である必要があります。

レンダラーがこの仕様に適合するためには、スタイルシートを関連仕様に従って解釈することに加え、この仕様で定義された全機能に対応し、それらを正しくパースし文書を適切にレンダリングする必要があります。ただし、デバイスの制約によってUAが文書を正しくレンダリングできない場合でも、 UAが非適合となるわけではありません（例: UAはモノクロモニター上で色を表示する必要はありません）。

オーサリングツールがこの仕様に適合するためには、汎用CSS文法および本モジュールの各機能の個別文法に従って構文的に正しいスタイルシートを書き、本モジュールで定義されたスタイルシートの全ての適合要件を満たす必要があります。

部分的な実装

著者が前方互換のパース規則を活用してフォールバック値を指定できるようにするため、 CSSレンダラーは必ず（適切に無視）、利用可能なレベルのサポートがない@規則、プロパティ、プロパティ値、キーワード、その他の構文要素を無効として扱わなければなりません。特に、ユーザーエージェントは 決してサポートされていない値を個別に無視して、サポートされている値だけを1つの複数値プロパティ宣言内で適用してはなりません: いずれかの値が無効（未サポート値は必ず無効）と判定された場合、 CSSでは宣言全体を無視する必要があります。

不安定・独自機能の実装

実験的でない実装

仕様がCandidate Recommendation段階に達すると、実験的でない実装が可能となり、実装者は仕様に従って正しく実装できることを示せるCRレベルの機能については接頭辞なしでリリースすべきです。

CSSの実装間で相互運用性を確立・維持するため、 CSSワーキンググループは実験的でないCSSレンダラーに対し、実装報告（必要ならそのためのテストケースも）をW3Cに提出するよう求めます。 W3Cに提出されたテストケースはCSSワーキンググループによるレビュー・修正対象となります。

テストケースや実装報告の提出方法については CSSワーキンググループのウェブサイト https://www.w3.org/Style/CSS/Test/ を参照してください。質問は public-css-testsuite@w3.org メーリングリストへ。

セレクター レベル 4

概要

この文書のステータス

1. はじめに

1.1. モジュール間の関係

2. セレクター概要

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

3.1. 構造と用語

3.2. データモデル

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

3.4. 相対セレクター

3.5. 疑似クラス

3.6. 疑似要素

3.6.1. 構文

3.6.2. 文書ツリーへの紐付け

3.6.3. 疑似要素の疑似クラス化

3.6.4. サブ疑似要素

3.6.5. 内部構造

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

3.8. 名前空間プレフィックスの宣言

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

3.10. レガシーエイリアス

4. 論理結合

4.1. セレクターリスト

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

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

4.4. 特異性調整疑似クラス：:where()

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

5. 要素セレクター

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

5.2. 全称セレクター

5.3. 要素セレクターの名前空間

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

6. 属性セレクター

6.1. 属性の存在・値セレクター

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

6.3. 大文字・小文字の区別

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

6.5. DTD内のデフォルト属性値

6.6. クラスセレクター

6.7. IDセレクター

7. 言語疑似クラス

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

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

8. ロケーション疑似クラス

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

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

8.3. ローカルリンク疑似クラス：:local-link

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

8.5. ターゲットコンテナ疑似クラス：:target-within

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

9. ユーザー操作疑似クラス

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

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

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

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

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

10. 時間次元疑似クラス

10.1. 現在要素疑似クラス：:current

10.2. 過去要素疑似クラス：:past

10.3. 未来要素疑似クラス：:future

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

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

11.2. メディア読み込み状態：:buffering、:stalled疑似クラス

11.3. サウンド状態：:muted、:volume-locked 疑似クラス

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

12.1. 折りたたみ状態：:open、:closed疑似クラス

12.2. モーダル（排他的操作）状態：:modal疑似クラス

12.3. フルスクリーン表示状態：:fullscreen 疑似クラス

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

13. 入力疑似クラス

13.1. 入力コントロールの状態

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

13.1.2. 可変性疑似クラス：:read-only および :read-write

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

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

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

13.2. 入力値の状態

13.2.1. 選択オプション疑似クラス：:checked

13.2.2. 不定値疑似クラス：:indeterminate

セレクターレベル 4

15.2. 子コンビネータ (`>`)

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

15.4. 一般兄弟コンビネータ (`~`)

16.1. 列コンビネータ (`||`)

付録B: Web互換のために必要だが廃止された`-webkit-`パースのクセ