選択子 — Selectors Level 4

1.1. ~module間の相互作用

この~moduleは、 `~level 2$, `~level 3$ にて~CSS用に定義された選択子の定義を置換し，その集合を拡張する。 ◎ This module replaces the definitions of and extends the set of selectors defined for CSS in [SELECT] and [CSS21].

具現化~treeの中の抽象的な要素を定義する`疑似要素$選択子は、 この仕様の一部を成すものではない。 その汎用~構文は，ここで述べられるが、 それらの具現化~modelとの密接な統合, および~DOM~queryその他の関連しない用途などに因り， 他の~module【 `CSS-PSEUDO-4$r など】にて定義されることになる。 ◎ Pseudo-element selectors, which define abstract elements in a rendering tree, are not part of this specification: their generic syntax is described here, but, due to their close integration with the rendering model and irrelevance to other uses such as DOM queries, they will be defined in other modules.

【この訳に特有な表記規約】

3.1. 構造と各種用語

`選択子@ （ `selector^en ）は、 ~tree構造における特定0の要素（たち）が成す~patternを表現する。 `選択子$は、［ `単純-選択子$, `複合-選択子$【／`疑似-複合-選択子$】, `複階-選択子$, `選択子~list$ ］の総称である†。 `選択子$の `~subject@ （ `subject of a selector^en ）とは、 当の`選択子$の対象になるものとして定義される要素たちである — すなわち、 `選択子$に `合致して@ いる任意の要素である。 ◎ A selector represents a particular pattern of element(s) in a tree structure. The term selector can refer to a simple selector, compound selector, complex selector, or selector list. The subject of a selector is any element that selector is defined to be about; that is, any element matching that selector.

【† この仕様の中では、 `複階-選択子$を表すことが多い。 この種の`同一視＠#_note1_$は、 “一定範囲の要素を選択する” という機能上の観点からは同等に扱えるイミで 理に適う面もある一方で， 定義が解り難くなる面もあるので、 この訳では必要に応じて注釈を加えている。 】

`単純-選択子@ （ `simple selector^en ）

合致する要素が満たすべき単独の条件を表す。 それは、 次のいずれかである （`文法$においては `simple-selector$t により表現される） ⇒＃ `型~選択子$, `全称~選択子$, `属性~選択子$, `~class選択子$, `~ID選択子$, `疑似類$ ◎ A simple selector is a single condition on an element. A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector. (It is represented by <simple-selector> in the selectors grammar.)＼

所与の要素 %E は、 次を満たすならば，`単純-選択子$ %S に`合致して$いるとされる ⇒ %S は、 この仕様に定義されるとおり, かつ`文書~言語$に則って， %E を正確aに述べている。 ◎ A given element is said to match a simple selector when that simple selector, as defined in this specification and in accordance with the document language, accurately describes the element.

`複合-選択子@ （ `compound selector^en ）

`結合子$で分離されていない`単純-選択子$たちが成す連列であり （`文法$においては `compound-selector$t により表現される）、 単独の要素が同時に満たす条件たちが成す集合を表現する。 この連列が［ `型~選択子$／`全称~選択子$ ］を包含する場合、 それは先頭に来なければナラナイ。 ◎ A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element. If it contains a type selector or universal selector, that selector must come first in the sequence. Only one type selector or universal selector is allowed in the sequence. (A compound selector is represented by <compound-selector> in the selectors grammar.)＼

所与の要素 %E は、 次を満たすならば，`複合-選択子$ %S に`合致して$いるとされる ⇒ %E は、 %S を成すどの`単純-選択子$にも`合致して$いる ◎ A given element is said to match a compound selector when it matches all simple selectors in the compound selector.

注記： 空白は`子孫~結合子$を表現するので、 `複合-選択子$内の`単純-選択子$たちの合間には，空白は許容されない。 ◎ Note: As whitespace represents the descendant combinator, no whitespace is allowed between the simple selectors in a compound selector.

`疑似-複合-選択子@ （ `pseudo-compound selector^en ）

`疑似要素$選択子 %P に 0 個以上の`疑似類$選択子が`結合子$を挟まずに後続するもの （`文法$においては `pseudo-compound-selector$t により表現される）。 %P には，省略可能な［ `複合-選択子$／`疑似-複合-選択子$ ］ %Q が`結合子$を挟まずに先行する。 `疑似要素$は、 ~AND↓ を満たすとき，`疑似-複合-選択子$に`合致して$いるとされる： ◎ A pseudo-compound selector is a pseudo-element selector, optionally followed by additional pseudo-class selectors, and optionally preceded by a compound selector or another pseudo-compound selector, without any combinators. (A pseudo-compound selector is represented by <pseudo-compound-selector> in the selectors grammar.) A pseudo-element matches a pseudo-compound selector when＼

• %P の名前に対応する`疑似要素$である ◎ it has the specified pseudo-element name,＼
• 後続する各 `疑似類$により表現される追加的な条件に合致している ◎ matches the additional conditions represented by any pseudo-classes,＼
• その`出自の要素$は、 %Q に`合致-$している — %Q が省略された場合、 %Q は`全称~選択子$であると見做される （例えば， `.foo ::before^css は、 `.foo *::before^css と等価であり， `.foo::before^css とは別物になる）。 ◎ and has an originating element represented by the adjacent preceding selector. If there is no adjacent preceding selector, the universal selector is assumed. (For example, .foo ::before is equivalent to .foo *::before, and distinct from .foo::before.)

例えば， `.foo::before:hover^css においては、［ `.foo^css は`複合-選択子$, `::before:hover^css は`疑似-複合-選択子$ ］を成す。 一方で， `.foo::before::marker^css においては、［ `before$pe, `marker$pe ］は別々な`疑似-複合-選択子$を成す。 【この場合、 `marker^pe は`下位-疑似要素$を成すので，その`出自の要素$は `before^pe で表現されることになる。】 ◎ For example, in .foo::before:hover, the .foo is a compound selector, while the ::before:hover is a pseudo-compound selector. However, in .foo::before::marker, ::before and ::marker are separate pseudo-compound selectors.

注記： `疑似-複合-選択子$は、 `複合-選択子$ではないので， `複合-選択子$しか期待しない所には利用できない。 `疑似-複合-選択子$は、［ その`出自の要素$との関係性を表出する，ある`結合子$ ］を伴っているかのように動作する — `子~結合子$が親~要素との関係性を表出するのと同じく。 ◎ Note: A pseudo-compound selector is not a compound selector, and can’t be used in places that expect a compound selector only. Pseudo-compound selectors act as if they carry a combinator with themselves, expressing their relationship with their originating element, just as the > combinator expresses a relationship with a parent element.

`結合子@ （ `combinator^en ）

両側に在る`複合-選択子$で表現される 2 つの要素の関係性についての条件を表す。 ~Selectors ~level 4 の結合子には次の 4 種がある ⇒＃ `子孫~結合子$（`空白$）, `子~結合子$（ “大なり記号”, `003E^U ）, `直後~同胞~結合子$（“正符号”, `002B^U ）, `後続~同胞~結合子$（ “~tilde”, `007E^U ） ◎ A combinator is a condition of relationship between two elements represented by the compound selectors on either side. Combinators in Selectors Level 4 include: the descendant combinator (white space), the child combinator (U+003E, >), the next-sibling combinator (U+002B, +), and the subsequent-sibling combinator (U+007E, ~).＼

所与の 2 つの要素【順序も有意】は、 次を満たすならば`結合子$に`合致して$いるとされる ⇒ `結合子$が表す関係性についての条件に`合致して$いる。 ◎ Two given elements are said to match a combinator when the condition of relationship between these elements is true.

`複階-選択子@ （ `complex selector^en ）

`結合子$で分離された 1 個以上の “単位” たち （および，それら “単位” の合間にある`結合子$たち） が成す連列 （`文法$においては `complex-selector$t により表現される）。 それは、 一連の要素が［ それらの`結合子$で述べられる特定0の関係性 ］を同時に満たす条件たちが成す集合を表現する。

`複階-選択子$を成す各 “単位” （`文法$においては `complex-selector-unit$t により表現される）は、 順に［ 0 〜 1 個の`複合-選択子$, 0 個以上の`疑似-複合-選択子$ ］からなる，空でない連列である。

◎ A complex selector is a sequence of one or more compound selectors and/or pseudo-compound selectors, with compound selectors separated by combinators. It represents a set of simultaneous conditions on a set of elements in the particular relationships described by its combinators. (Complex selectors are represented by <complex-selector> in the selectors grammar.)＼

所与の［ 要素／`疑似要素$ ］ %E は、 ~AND↓ を満たす要素~群 %L が在るとき， `複階-選択子$ %S に`合致して$いるとされる：

• %L を成す要素の個数 ~EQ %S を成す単位の個数 — 以下、 %N と記す。

• どの %n ~IN { 1 〜 %N } に対しても、［ %L を成す %n 個目の要素 %要素, %S を成す %n 個目の単位 %単位 ］は ~AND↓ を満たす：

  • %要素 は、 %単位 を成す`複合-選択子$ — 無い場合は`全称~選択子$が在るものと見做す — に`合致して$いる
  • %単位 を成す どの`疑似-複合-選択子$ %P に対しても、 次を満たす`疑似要素$ %疑似要素 がある ⇒ ［ %疑似要素 は %P に`合致して$いる ］~AND［ %要素 ~EQ %疑似要素 の`最終的な出自の要素$ ］
• どの %n ~IN { 1 〜 %N ~MINUS 1 } に対しても、 次が満たされる ⇒ %L を成す［ %n , %n ~PLUS 1 ］個目の要素は， %S を成す［ %n , %n ~PLUS 1 ］個目の単位の合間に在る結合子による関係性を満たす
• %E は %S を成す最後の単位の最後の［ `複合-選択子$／`疑似-複合-選択子$ ］に`合致して$いる

◎ A given element or pseudo-element is said to match a complex selector when it matches the final compound/pseudo-compound selector in the sequence, and every preceding unit of the sequence also matches an element or pseudo-element, with the correct relationship between consecutive units as expressed by the combinators separating them (or, for pseudo-compound selectors, the correct originating element relationship).

【 原文は行間情報が多いので、 この訳では，`文法§に基づいて記述を補完している。 】

【 これらの語は，上述の様に階層的な関係で区別されるものであるが、 （構文上は／機能的には）同時に： `単純-選択子$は， 1 個のそれからなる`複合-選択子$と見なすこともでき、 `複合-選択子$は， 1 個のそれからなる`複階-選択子$と見なすこともでき、 `複階-選択子$は， 1 個のそれからなる`選択子~list$と見なすこともできる。 その結果， 1 個の`単純-選択子$は，`選択子~list$と見なせることになり、 `複合-選択子$の一部分もまた `複合-選択子$と見なすことができ， `複階-選択子$の一部分もまた `複階-選択子$と見なすこともできる, 等々になる。 したがって，例えば、 複階-選択子に適用される~algoや要件は， 型~選択子などの単純-選択子や複合-選択子, 等々にも（それを複階-選択子と見なす下で）適用されることになる。 】

［ `単純-選択子$／`複合-選択子$／`複階-選択子$ ］たちが `成す~list@ とは、 これらいずれかの選択子たちが成す~commaで分離された~listである 【~listが空な場合（空白のみ）、`無効な選択子$になる】 。 ［ どの選択子か未指定な場合／周囲の注釈文から明らかな場合 ］は、 単に `選択子~list@ とも称される。 既定では、 `複階-選択子$たちが`成す~list$の意味になる。 （追加的な情報は、 `選択子~list§を見よ。 正式な構文については、 `文法§における各種 `*-selector-list^t 生成規則を見よ。） ◎ A list of simple/compound/complex selectors is a comma-separated list of simple, compound, or complex selectors. This is also called just a selector list when the type is either unimportant or specified in the surrounding prose; if the type is important and unspecified, it defaults to meaning a list of complex selectors. (See § 4.1 Selector Lists for additional information on selector lists and the various <*-selector-list> productions in the grammar for their formal syntax.)＼

所与の要素 %E は、 次を満たすならば，`選択子~list$ %S に`合致して$いるとされる ⇒ %E は %S 内の 1 個以上の`選択子$に`合致して$いる ◎ A given element is said to match a selector list when it matches any (at least one) of the selectors in that selector list.

3.2. ~data~model

選択子は、 ~DOM~tree `DOM$r などの要素~treeに対し評価される。 この仕様においては、 “文書~tree”, あるいは “~source文書” とも称される。 ◎ Selectors are evaluated against an element tree such as the DOM. [DOM] Within this specification, this may be referred to as the "document tree" or "source document".

各~要素は、 次に挙げる 5 種の側面 【これらは、以下では “特能（ `feature^en ）” と総称される】 に基いて選択される — いずれも文字列として照合される： ◎ Each element may have any of the following five aspects, which can be selected against, all of which are matched as strings:

• 要素の型（~tag名とも呼ばれる） ◎ The element’s type (also known as its tag name).
• 要素が属する名前空間 ◎ The element’s namespace.
• ~ID ◎ An ID.
• 要素が属する 0 個以上の~class （名前を持つ~group） ◎ Classes (named groups) to which it belongs.
• ［ 名前, 値 ］の~pairである，属性 ◎ Attributes, which are name-value pairs.

選択子の多くは、 `文書~言語@ （ `document language^en ） の意味論 （すなわち，文書~treeの［ 言語と意味論 ］） に依存したり， `~host言語@ （ `host language^en ） （すなわち，選択子~構文を利用している言語）の意味論に依存する。 例えば， `lang()$ps 選択子は、 要素に自然言語が どう結付けられるかを定義する際に，`文書~言語$（例： ~HTML）に依存する。 少し異なる例として， `first-line$pe 疑似要素は、［ それが何を表現するか, その何かに対し何を行えるか ］を定義する際に，`~host言語$（例： ~CSS）に依存する。 ◎ Many of the selectors depend on the semantics of the document language (i.e. the language and semantics of the document tree) and/or the semantics of the host language (i.e. the language that is using selectors syntax). For example, the :lang() selector depends on the document language (e.g. HTML) to define how an element is associated with a language. As a slightly different example, the ::first-line pseudo-element depends on the host language (e.g. CSS) to define what a ::first-line pseudo-element represents and what it can do.

3.3. 視野~付き選択子

~host~appは、 選択子の視野を［ 文書の特定0の下位tree, あるいは文書の一片 ］†に絞ることもある。 そのような選択子は， `視野~付き選択子@ （ `scoped selector^en ）と呼ばれ、 この下位treeの根は `視野ng根@ （ `scoping root^en ）と呼ばれる††。 ◎ Some host applications may choose to scope selectors to a particular subtree or fragment of the document, The root of the scoping subtree is called the scoping root.

【† `文書$の下位treeでないもの（`文書片$）も含め，根が `root$ps に合致しない要素~tree 】【†† すなわち，視野を見渡している “視点” 】

`視野~付き$にされた選択子は、 その`視野ng根$の子孫である要素のみに合致する （選択子を成す残りの部分†に対する照合は制約されない — 視野に入る必要があるのは、 当の選択子の`~subject$を成す要素たちに限られる††）。 ◎ When a selector is scoped, it matches an element only if the element is a descendant of the scoping root. (The rest of the selector can match unrestricted; it’s only the final matched elements that must be within the scope.)

【† “残りの部分（ `the rest^en ）” とは、 当の選択子（`複階-選択子$）を成す最後の “単位” — 要素に直に合致する`複合-選択子$ （`~subject$が疑似要素である場合は`疑似-複合-選択子$も含む） — 以外を指す。 例えば，選択子 "`a > b^css" を成す “残り” は、 "`a >^css" （ `b^css 以外）を指す。 】【†† 言い換えれば、 視野~付きでない下で合致した要素たちを`視野ng根$の子孫のみを残すよう絞込む。 】

3.4. 相対~選択子

ある種の文脈は、 `相対~選択子@ （ `relative selector^en ） を受容し得る。 それは、［ 1 個~以上の `~anchor要素@ に相対的な要素を表現する選択子 ］用の略式である。 相対~選択子は、 `結合子$から始まる — 結合子が無い場合，暗黙な`子孫~結合子$が先頭に在る。 加えて、 当の選択子の先頭には，`~anchor要素$を表現している暗黙な選択子が在る。 ◎ Certain contexts may accept relative selectors, which are a shorthand for selectors that represent elements relative to one or more relative selector anchor elements. Relative selectors begin with a combinator, with a selector representing the anchor element implied at the start of the selector. (If no combinator is present, the descendant combinator is implied.)

【 “相対” は、 `構造と各種用語§ にて定義される各種~選択子の階層関係とは別々な，それらを拡張する概念である。 】【 暗黙な`子孫~結合子$を伴う相対~選択子は、 構文上は，通常の選択子と判別し得ない。 相対~選択子を利用できるのは、 それを明示的に期待する所に限られよう。 】【 通常の選択子は、 “先頭に［ `~anchor要素$として `root$ps, 暗黙な`子孫~結合子$ ］を伴う`相対~選択子$である” と解釈することもできる。 】

`文法$においては、 `相対~選択子$は `relative-selector$t により表現され， それらが成す~listは `relative-selector-list$t により表現される。 ◎ Relative selectors are represented by <relative-selector> in the selectors grammar, and lists of them by <relative-selector-list>.

3.5. 疑似類

`疑似類@ （ `pseudo-class^en ）は、 文書~treeの外側にある情報に基づく選択を, あるいは 他の`単純-選択子$を利用して表出するには不便または不可能な選択を許可するような，`単純-選択子$である。 疑似類は、 文書~自身は変化しなくとも，［ 利用者が文書とヤリトリする間に，要素は疑似類を獲得したり, 失ったりし得る ］イミで動的でもある。 `疑似類$は、［ 文書~source／文書~tree ］に現れたり，それを改変することはない。 ◎ Pseudo-classes are simple selectors that permit selection based on information that lies outside of the document tree or that can be awkward or impossible to express using the other simple selectors. They can also be dynamic, in the sense that an element can acquire or lose a pseudo-class while a user interacts with the document, without the document itself changing. Pseudo-classes do not appear in or modify the document source or document tree.

例えば、 `valid$ps は定例の疑似類であり, `lang()$ps は`関数形~疑似類$である。 ◎ For example, :valid is a regular pseudo-class, and :lang() is a functional pseudo-class.

すべての~CSS~keywordと同様に、 `疑似類$の名前は `~ASCII大小無視$である。 ~colonと`疑似類$の名前の間には，`空白$は許容されない。 また，通例の~CSS構文と同様、 関数の名前と後続の開き丸括弧の間にも`空白$は許容されない （しがたって， ~CSS `function-token$t を形成する）。 通例の~CSS構文と同様、 他から指定されない限り，`関数形~疑似類$の各~引数の周囲には，`空白$は許容される。 ◎ Like all CSS keywords, pseudo-class names are ASCII case-insensitive. No white space is allowed between the colon and the name of the pseudo-class, nor, as usual for CSS syntax, between a functional pseudo-class’s name and its opening parenthesis (which thus form a CSS function token). Also as usual, white space is allowed around the arguments inside the parentheses of a functional pseudo-class unless otherwise specified.

`疑似類$は、 他の`単純-選択子$と同様に，選択子に包含されるすべての`複合-選択子$において許容されるが、 `型~選択子$, または`全称~選択子$（もし在れば）に後続しなければナラナイ。 ◎ Like other simple selectors, pseudo-classes are allowed in all compound selectors contained in a selector, and must follow the type selector or universal selector, if present.

注記： `疑似類$には、 両立し得ないものもある （それらを包含している`複合-選択子$は、 妥当であるが，何にも合致しないことになる）。 他のものは、 同じ要素に同時に適用し得る。 ◎ Note: Some pseudo-classes are mutually exclusive (such that a compound selector containing them, while valid, will never match anything), while others can apply simultaneously to the same element.

3.6. 疑似要素

`疑似要素@ （ `pseudo-element^en ）は， 文書~tree内には直に現れない “`要素^em” を表現する — ある種の`疑似類$が［ 文書~treeには直に現れない追加的な状態~情報 ］を表現するのと類似に。 `疑似要素$は、［ 文書~言語が供するものを超える，文書~treeについての抽象-化 ］を創出するために利用される — 例えば、［ 文書~言語の要素に対応しない，文書を成すある部位 ］（要素~境界と揃わない範囲, 文書の~tree構造に収まらないものも含む） を選択するために利用され得る。 そのような部位は，例えば、［ 文書~treeに含まれない内容／ 文書~treeを別形へ投影した内容 ］を表現したり，［ ~style付け／ ~layout／ 利用者-ヤリトリ／ その他，文書~treeに反映されない処理n ］により供される情報に依拠する。 ◎ Similar to how certain pseudo-classes represent additional state information not directly present in the document tree, a pseudo-element represents an element not directly present in the document tree. They are used to create abstractions about the document tree beyond those provided by the document tree. For example, pseudo-elements can be used to select portions of the document that do not correspond to a document-language element (including such ranges as don’t align to element boundaries or fit within its tree structure); that represent content not in the document tree or in an alternate projection of the document tree; or that rely on information provided by styling, layout, user interaction, and other processes that are not reflected in the document tree.

【 “疑似要素” という語は、 この種の “要素” を`~subject$とする選択子を意味することもある — それは、 実際には， “疑似要素~選択子” の略称である。 】

`疑似類$と同様に、 `疑似要素$も，［ 文書~source／文書~tree ］内には現れず, それを改変することもない。 したがって疑似要素は、 `構造上の疑似類$の解釈にも，［ その`出自の要素$や その【子孫や先祖たちが成す】~tree ］に関わる他の選択子の解釈にも影響しない。 ◎ Like pseudo-classes pseudo-elements do not appear in or modify the document source or document tree. Accordingly, they also do not affect the interpretation of structural pseudo-classes or other selectors pertaining to their originating element or its tree.

［ どの疑似要素が存在し, その型は何で, どのような能があるか ］は、 ~host言語が定義する。 ~CSSに存在する疑似要素は、 `CSS-PSEUDO-4$r にて定義される — うち一部は、 `~level 2$, `~level 3$ においても定義される。 【網羅的ではない — 疑似要素を定義する~CSS~moduleは他にもある。】 ◎ The host language defines which pseudo-elements exist, their type, and their abilities. Pseudo-elements that exist in CSS are defined in [CSS21] (Level 2), [SELECT] (Level 3), and [CSS-PSEUDO-4] (Level 4).

3.7. 文字大小比較

すべての~Selectors構文は、 その制御~下にない部分を除いて，`~ASCII大小無視$である （すなわち， [a-z] と [A-Z] は等価と見なされる） — 特定的には、 文書~言語の［ 要素~名, 属性~名, 属性~値 ］における文字大小比較は，文書~言語に依存する。 ◎ All Selectors syntax is ASCII case-insensitive (i.e. [a-z] and [A-Z] are equivalent), except for the parts that are not under the control of Selectors: specifically, the case-sensitivity of document language element names, attribute names, and attribute values depends on the document language.

名前空間~接頭辞の文字大小比較は、 `CSS3NAMESPACE$r にて定義される。 `言語~範囲$の文字大小比較は、 `lang()$PS にて定義される。 ◎ Case sensitivity of namespace prefixes is defined in [CSS3NAMESPACE]. Case sensitivity of language ranges is defined in the :lang() section.

~Selectorsにおける符号位置は、 `~escape法$【！ CSS2 の`~escape法~規則$ `CSS21$r 】に則って，~backslash `005C^U により~escapeできる。 文字~escape法は，~Selectorsの中でその文字が持ち得る特別な意味を “取り消す”ことに注意。 例えば，選択子 `#foo>a^css は`結合子$を包含しているが、 `#foo\>a^css は 代わりに~ID `foo>a^l を伴う要素を選択する。 ◎ Code points in Selectors can be escaped with a backslash according to the same escaping rules as CSS. [CSS21] Note that escaping a code point “cancels out” any special meaning it may have in Selectors. For example, the selector #foo>a contains a combinator, but #foo\>a instead selects an element with the id foo>a.

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

一部の選択子は、 名前空間~接頭辞を~supportする。 名前空間~接頭辞を `宣言-@ する仕組みは、 ~Selectorsを利用する言語により指定されるベキである。 言語が名前空間~接頭辞の宣言の仕組みを指定しない場合、 いかなる接頭辞も宣言されない。 ~CSSにおいては、 名前空間~接頭辞は `namespace$at 規則 `CSS3NAMESPACE$r により宣言される。 ◎ Certain selectors support namespace prefixes. The mechanism by which namespace prefixes are declared should be specified by the language that uses Selectors. If the language does not specify a namespace prefix declaration mechanism, then no prefixes are declared. In CSS, namespace prefixes are declared with the @namespace rule. [CSS3NAMESPACE]

3.9. 無効な選択子と~errorの取扱い

次に挙げるものは、 `無効な選択子@ （ `invalid selector^en, 妥当でない選択子） になる — ~UAは、 それらの取扱い規則に従うモノトスル： ◎ User agents must observe the rules for handling invalid selectors:

• 選択子の構文解析-時に~errorになるもの — 例：認識できない~tokenや, 構文解析のある地点にて許容されない~tokenを含むもの （【！overall】`文法§, 選択子ごとの構文~定義を見よ） ◎ a parsing error in a selector, e.g. an unrecognized token or a token which is not allowed at the current parsing point (see overall § 18 Grammar and per-selector syntax definitions), causes that selector to be invalid.
• `宣言-済み$でない名前空間~接頭辞を包含している`単純-選択子$ ◎ a simple selector containing an undeclared namespace prefix is invalid
• 無効な［ `単純-選択子$／`結合子$／~token ］を包含している選択子 ◎ a selector containing an invalid simple selector, an invalid combinator or an invalid token is invalid.
• 無効な選択子を包含している`選択子~list$ ◎ a selector list containing an invalid selector is invalid.
• 空な選択子 — すなわち，`複合-選択子$を包含しないもの ◎ an empty selector, i.e. one that contains no compound selector, is invalid.

注記： ~CSSの構文解析における前方-互換な原則と整合するよう、 ~UAは，自身が実用~levelで~supportしない［ 疑似類／疑似要素／結合子／その他の構文-構成子 ］を`無効な選択子$として扱うモノトスル。 `部分的な実装＠~CSSSNAPSHOT#conform-partial$を見よ。 ◎ Note: Consistent with CSS’s forwards-compatible parsing principle, UAs must treat as invalid any pseudo-classes, pseudo-elements, combinators, or other syntactic constructs for which they have no usable level of support. See Partial implementations.

`無効な選択子$は、 空集合を表現するので，何にも合致しない。 ◎ An invalid selector represents, and therefore matches, nothing.

3.10. 旧来の別名

一部の選択子には、 `旧来の別名@sel （ `legacy selector alias^en ） がある†。 これは、 構文解析-時点に標準な名前に変換される名前である （したがって、 当の選択子を表現している~obj~modelにおいては，どこにも現れない）。 ◎ Some selectors have a legacy selector alias. This is a name which, at parse time, is converted to the standard name (and thus does not appear anywhere in any object model representing the selector).

【† `selector^en を外さずに訳すなら、 “ある旧来の選択子の名前であって，当の標準な選択子の旧来の別名とされるもの” のようになろう。 】

4.1. 選択子~list

~comma（ `002C^U ）で分離された選択子たちが成す~list — `選択子~list$ — は、［ それを成す各`複階-選択子$により個別に選択された要素 ］すべての和集合を表現する。 例えば，~CSSにおいては、 いくつかの選択子が同じ宣言を共有するときは， それらを~commaで分離された~listに~group化してもよい。 ~commaの前後には，`空白$が現れてもよい。 ◎ A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the selector list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.

【 “選択子~list（ `selector list^en ）” は、 `~level 3$ までは “選択子たちが成す~group （ `groups of selectors^en ）” と称されていた （順序を含意する “~list” に改称されたのは、 CSSOM などの仕様にて選択子の処理~model（直列化）を定義する際に， この名称の方が適切になるからと思われる）。 】

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

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

注意： この例では，すべての選択子が妥当なので等価性が成り立つが、 これらのうち一つでも無効なものがあった場合，`選択子~list$全体が無効になる。 後者の書き方では， 3 個の~~見出し要素すべてに対する規則が無効~化されることになる一方、 前者の書き方では，個別に無効~化されることになる。 ◎ Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire selector list would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.

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()^ps 疑似類

論理和（ `matches-any^en ） 疑似類 `is()@ps は、 `forgiving-selector-list$t を唯一の引数にとる`関数形~疑似類$である。 ◎ The matches-any pseudo-class, :is(), is a functional pseudo-class taking a <forgiving-selector-list> as its sole argument.

この疑似類は、［ 引数を構文解析した結果の~list ］を成す［ いずれかの選択子に合致する要素 ］に合致する。 結果の~listが空な場合でも、 この疑似類は — 妥当であるが — 何にも合致しないことになる。 ◎ If the argument, after parsing, is an empty list, the pseudo-class is valid but matches nothing. Otherwise, the pseudo-class matches any element that matches any of the selectors in the list.

疑似要素は，論理和 疑似類では表現し得ない — それらは `is()$ps の中では妥当でない。 ◎ Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is().

既定の名前空間~宣言は、 `is()$ps 疑似類の引数を成す どの選択子に対しても， その`~subject$を表現している`複合-選択子$には — それが明示的に［ `全称~選択子$ ／ `型~選択子$ ］を包含している場合を除き — 影響しない。 ◎ Default namespace declarations do not affect the compound selector representing the subject of any selector within a :is() pseudo-class, unless that compound selector contains an explicit universal selector or type selector.

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

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

この仕様の以前の草案では、 この疑似類~用の名前に `matches()@ps を利用していた。 ~UAは、 後方-互換性に必要なら， この廃用にされた名前を `is()$ps 用の`旧来の別名$selとして追加的に実装してもヨイ。 ◎ As previous drafts of this specification used the name :matches() for this pseudo-class, UAs may additionally implement this obsolete name as a legacy selector alias for :is() if needed for backwards-compatibility.

4.3. 否定： `not()^ps 疑似類

否定~疑似類 `not()@ps は、 `complex-real-selector-list$t を引数にとる`関数形~疑似類$である。 それは，その引数で表現されない要素を表現する。 ◎ The negation pseudo-class, :not(), is a functional pseudo-class taking a <complex-real-selector-list> as an argument. It represents an element that is not represented by its argument.

注記： `~level 3$ においては、 1 個の`単純-選択子$に限り， `not()$ps の引数に許容されていた。 ◎ Note: In Selectors Level 3, only a single simple selector was allowed as the argument to :not().

注記： `not()$ps 疑似類の詳細度は、［ その~list引数を成す各`複階-選択子$の詳細度 ］のうち最も高いものに置換される — したがって，その挙動は、 `:not(:is(引数))^css と正確に同じになる。 `選択子の詳細度の計算-法§を見よ。 ◎ Note: The specificity of the :not() pseudo-class is replaced by the specificity of the most specific selector in its argument; thus it has the exact behavior of :not(:is(argument)). See § 17 Calculating a selector’s specificity.

`疑似要素$は、 否定~疑似類では表現し得ない — それらは `not()$ps の中では妥当でない。 ◎ Pseudo-elements cannot be represented by the negation pseudo-class; they are not valid within :not().

button:not([DISABLED])

*:not(FOO)

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

`is()$ps のときと同じく，既定の名前空間~宣言は、 `not()$ps 疑似類の引数を成す どの選択子に対しても， その`~subject$を表現している`複合-選択子$には — それが明示的に［ `全称~選択子$ ／ `型~選択子$ ］を包含している場合を除き — 影響しない（ `is()$ps の例を見よ）。 ◎ As with :is(), default namespace declarations do not affect the compound selector representing the subject of any selector within a :not() pseudo-class, unless that compound selector contains an explicit universal selector or type selector. (See :is() for examples.)

注記： `not()$ps 疑似類は、 “無用な” 選択子を書くことも許容する。 例えば， `:not(*|*)^css は、 どの要素も表現しない。 あるいは， `div:not(span)^css は、 `詳細度$がより高くなることを除いて， `div^css と等価になる。 ◎ Note: The :not() pseudo-class allows useless selectors to be written. For instance :not(*|*), which represents no element at all, or div:not(span), which is equivalent to div but with a higher specificity.

4.4. 詳細度~調整： `where()^ps 疑似類

詳細度~調整 疑似類 `where()@ps は、 `is()$ps と同じ［ 構文, 機能性 ］を備える`関数形~疑似類$であるが、 `is()$ps と違って，選択子の`詳細度$には寄与しない（その引数も含めて） — `where()$ps の`詳細度$は、 常に 0 になる。 ◎ The Specificity-adjustment pseudo-class, :where(), is a functional pseudo-class with the same syntax and functionality as :is(). Unlike :is(), neither the :where() pseudo-class, nor any of its arguments, contribute to the specificity of the selector—its specificity is always zero.

これは、 選択子~内に~filterを導入しつつ，それに結付けられた~style宣言も上書きし易く保つときに有用になる。 ◎ This is useful for introducing filters in a selector while keeping the associated style declarations easy to override.

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の将来~levelでは、［ この疑似類の~instanceに明示的に詳細度を設定する ］ための追加的な引数を導入するかもしれない。 ◎ Note: Future levels of Selectors may introduce an additional argument to explicitly set the specificity of that instance of the pseudo-class.

4.5. 関係上の： `has()^ps 疑似類

関係上の疑似類 `has()@ps は、 `relative-selector-list$t を引数にとる`関数形~疑似類$である。 それは、 次を満たす要素 %E を表現する ⇒ 引数を成すいずれかの`相対~選択子$ %S は、 次を満たす ⇒ `~anchor要素$として %E を与える下で %S を評価したとき，合致する要素がある。 ◎ The relational pseudo-class, :has(), is a functional pseudo-class taking a <relative-selector-list> as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element.

`has()$ps 疑似類は，入子にできない — `has()$ps の中の `has()$ps は妥当でない。 `疑似要素$も、 `has()^ps の中で許容される ものと明示的に定義されない限り， `has()$ps の中では妥当な選択子でない （そのような疑似要素は、 この仕様では定義されないが，他の仕様にて定義され得る）。 ◎ The :has() pseudo-class cannot be nested; :has() is not valid within :has(). Also, unless explicitly defined as a :has-allowed pseudo-element, pseudo-elements are not valid selectors within :has(). (This specification does not define any :has-allowed pseudo-elements, but other specifications may do so.)

注記： 疑似要素は、 一般に `has()$ps から除外される — それらの多くは，その先祖の~style付けに基づいて条件付きで存在するので、 それらを `has()$ps により~queryすることを許容すると， 循環依存を導入することになるので。 ◎ Note: Pseudo-elements are generally excluded from :has() because many of them exist conditionally, based on the styling of their ancestors, so allowing these to be queried by :has() would introduce cycles.

注記： `has()$ps が引数にとる `relative-selector-list$t は、 `内来的^emに`複階-選択子$になる （それは、 たぶん暗黙的に，結合子から開始するので）。 このことは、 `複階-選択子$を許容しない文脈には `has()$ps を利用し得ないことを意味する — 利用しても引数は無効になることが保証される。 ◎ Note: Since :has() takes a <relative-selector-list>, its arguments are inherently complex selectors (because they start, perhaps implicitly, with a combinator). This means :has() cannot be used in contexts that don’t allow complex selectors; its arguments will be guaranteed to be invalid.

5.1. 型（~tag名）選択子

`型~選択子@ （ `type selector^en ）は、 文書~言語の要素~型の名前であり， 文書~treeにおける その要素~型の~instanceを表現する。 ◎ A type selector is the name of a document language element type, and represents an instance of that element type in the document tree.

例えば 選択子 `h1^css は、 文書~内の `h1^e 要素を表現する。 ◎ For example, the selector h1 represents an h1 element in the document.

`型~選択子$は、 `~CSS有修飾~名$ — 省略可能な名前空間~接頭辞を伴う`~CSS識別子$ — として書かれる。 `CSS3NAMESPACE$r （`元素的な選択子における名前空間§を見よ。） ◎ A type selector is written as a CSS qualified name: an identifier with an optional namespace prefix. [CSS3NAMESPACE] (See § 5.3 Namespaces in Elemental Selectors.)

5.2. 全称~選択子

`全称~選択子@ （ `universal selector^en ）は、 特別な`型~選択子$であり，どの要素~型の要素も表現する。 ◎ The universal selector is a special type selector, that represents an element of any element type.

それは、 局所~名として 1 個の~asterisk （ `002A^U ）を伴う`~CSS有修飾~名$として書かれる。 `型~選択子$と同様に，`全称~選択子$も、 ある名前空間に属する要素のみに制約するよう，名前空間で修飾でき、 `元素的な選択子における名前空間§にて定義されるとおり，既定の名前空間に影響される。 ◎ It is written as a CSS qualified name with an asterisk (* U+002A) as the local name. Like a type selector, the universal selector can be qualified by a namespace, restricting it to only elements belonging to that namespace, and is affected by a default namespace as defined in § 5.3 Namespaces in Elemental Selectors.

選択子における`全称~選択子$の有無は、 `無特能$な要素を除き，［ 当の選択子が要素に合致するかどうか ］に効果を及ぼすことはない （`無特能$な要素は、 どの選択子†にも合致しない — `全称~選択子$も含めて††，）。 ◎ Unless an element is featureless, the presence of a universal selector has no effect on whether the element matches the selector. (Featureless elements do not match any selector, including the universal selector.)

【† `無特能$な要素に合致するものと明示的に定義されたものを除く — †† そのような選択子に`全称~選択子$も~~付された場合、 合致しなくなることになる。 】【 `全称~選択子$を表す~wildcard `002A^U は、 （名前空間は脇に置くなら）［ ある要素~型で代用したとき合致するならば，合致する ］ことを表す。 】

`全称~選択子$は、 他の`型~選択子$と同じ構文~規則に従う — `複合-選択子$においては、 それは，高々 1 回まで, かつ最初の`単純-選択子$として現れなければナラナイ。 ◎ The universal selector follows the same syntax rules as other type selectors: only one can appear per compound selector, and it must be the first simple selector in the compound selector.

注記： 照合の挙動には効果がなくとも、 `全称~選択子$を追加すれば，選択子は読み易くなることがある。 例えば `div :first-child^css は `div:first-child^css に見誤り易い。 `div *:first-child^css の方が違いが明白になる。 ◎ Note: In some cases, adding a universal selector can make a selector easier to read, even though it has no effect on the matching behavior. For example, div :first-child and div:first-child are somewhat difficult to tell apart at a quick glance, but writing the former as div *:first-child makes the difference obvious.

5.3. 元素的な選択子における名前空間

［ `型~選択子$／`全称~選択子$ ］には，省略可能な名前空間~成分も許容される。 すなわち，要素~名には、 `宣言-済み$な名前空間~接頭辞が — 名前空間~分離子 `007C^U で分離して — 前置されてよい。 それは、 各~形に応じて，次の意味を持つ： ◎ Type selectors and universal selectors allow an optional namespace component: a namespace prefix that has been previously declared may be prepended to the element name separated by the namespace separator “vertical bar” (| U+007C). (See, e.g., [XML-NAMES] for the use of namespaces in XML.) It has the following meaning in each form:

`%ns|%E^css

名前空間 %ns に属する，名前 %E の要素 ◎ elements with name E in namespace ns

【 %ns が`~NULL名前空間$を表現する場合、 `|%E^css と等価になる。 】

`*|%E^css

属する名前空間を問わず，名前 %E の要素 — どの名前空間にも属さないものも含めて ◎ elements with name E in any namespace, including those without a namespace

`|%E^css

どの名前空間にも属さない【言い換えれば、`~NULL名前空間$に属する】，名前 %E の要素 ◎ elements with name E without a namespace

`%E^css

`既定の名前空間$が`宣言-済み$でない場合、 `*|%E^css と等価になる。 他の場合、［ %ns を既定の名前空間とするときの `%ns|%E^css ］と等価になる。 ◎ if no default namespace has been declared for selectors, this is equivalent to *|E. Otherwise it is equivalent to ns|E where ns is the default namespace.

@namespace foo url(http://www.example.com);
foo|h1 { color: blue }  /* 規則 1 */
foo|* { color: yellow } /* 規則 2 */
|h1 { color: red }      /* 規則 3 */
*|h1 { color: green }   /* 規則 4 */
h1 { color: green }     /* 規則 5 */

`型~選択子$を含まない`複合-選択子$は、 `既定の名前空間$が宣言されている下では，依然として 既定の名前空間に属する要素のみに合致する。 ◎ If a default namespace is declared, compound selectors without type selectors in them still only match elements in that default namespace.

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

［ `型~選択子$／`全称~選択子$ ］のうち，`宣言-済み$でない名前空間~接頭辞を伴うものは、 `無効な選択子$である。 ◎ A type selector or universal selector containing a namespace prefix that has not been previously declared is an invalid selector.

5.4. 定義-済み： `defined^ps 疑似類

~host言語によっては、 要素には［ “定義-済み” ／ “構築-済み” ］かそうでないかの区別がある。 `defined@ps `疑似類$は、［ ~host言語により，全部的に定義-済みな要素であると規定されるもの ］に合致する。 ◎ In some host languages, elements can have a distinction between being “defined”/“constructed” or not. The :defined pseudo-class matches elements that are fully defined, as dictated by the host language.

~host言語にこの類の区別は無い場合、 それに属するすべての要素は `defined$ps に合致する。 ◎ If the host language does not have this sort of distinction, all elements in it match :defined.

p:defined { ... }

custom-element { visibility: hidden }

custom-element:defined { visibility: visible }

6.1. 属性~存在p／属性~値 選択子

CSS2 では 4 種の`属性~選択子$が導入されている： ◎ CSS2 introduced four attribute selectors:

`[%att]^css

次を満たす要素を表現する ⇒ %att 属性を有する ◎ Represents an element with the att attribute,＼

属性の値は問わない。 ◎ whatever the value of the attribute.

`[%att=%val]^css

次を満たす要素を表現する ⇒ %att 属性を有していて，その値は %val 【が表現する文字列】に等しい ◎ Represents an element with the att attribute whose value is exactly "val".

`[%att~=%val]^css

次を満たす要素を表現する ⇒ %att 属性を有していて，［ その値を`空白$で分離して得られる単語~listを成すいずれかの単語 ］は %val に等しい ◎ Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val".＼

%val に`空白$が含まれている場合、 何も表現しないことになる （単語は`空白$で`分離される^emので）。 %val が空~文字列の場合も，何も表現しないことになる。 ◎ If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

`[%att|=%val]^css

次を満たす要素を表現する ⇒ %att 属性を有していて，その値は次を満たす ⇒ %val に等しいか, ［ %val, `002D^U ］並びで始まる ◎ Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D).＼

これは首に［ `BCP47$r またはその後継版 ］の言語 `subcode^en †と照合する用途が意図されている （例：~HTMLの `a$e 要素の `hreflang^a 属性）。 `lang^a 属性 （または `xml:lang^a 属性）用の言語 `subcode^en 照合については `lang()$ps を見よ。 【† `subcode^en は、いわゆる下位tag（ `subtag^en ）と同義と思われる。】 ◎ This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang() pseudo-class.

属性~値に照合される %val は、［ `ident-token$t ／ `string-token$t ］として与えられなければナラナイ。 `CSS3SYN$r ◎ Attribute values must be <ident-token>s or <string-token>s. [CSS3SYN]

【 `~CSS識別子$でない（前者に合致しない）文字列は、 引用符で括る（後者として与える）必要がある。 】

h1[`title^a]

span[`class^a="example"]

span[`hello^a="Cleveland"][`goodbye^a="Columbus"]

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

a[`hreflang^a=fr]

a[`hreflang^a|="en"]

DIALOGUE[`character^a=romeo]
DIALOGUE[`character^a=juliet]

6.2. 部分照合 属性~選択子

属性~値の一部を成す文字列との照合~用に，次の 3 種の`属性~選択子$が供される： ◎ Three additional attribute selectors are provided for matching substrings in the value of an attribute:

[%att^=%val]

次を満たす要素を表現する ⇒ %att 属性を有していて，その値は “接頭辞” %val から始まる ◎ Represents an element with the att attribute whose value begins with the prefix "val".＼

%val が空~文字列である場合、 この選択子は何も表現しない。 ◎ If "val" is the empty string then the selector does not represent anything.

[%att$=%val]

次を満たす要素を表現する ⇒ %att 属性を有していて，その値は “接尾辞” %val で終端する ◎ Represents an element with the att attribute whose value ends with the suffix "val".＼

%val が空~文字列である場合、 この選択子は何も表現しない。 ◎ If "val" is the empty string then the selector does not represent anything.

`[%att*=%val]^css

次を満たす要素を表現する ⇒ %att 属性を有していて，その値は どこかに文字列 %val を包含している ◎ Represents an element with the att attribute whose value contains at least one instance of the substring "val".＼

%val が空~文字列である場合、 この選択子は何も表現しない。 ◎ If "val" is the empty string then the selector does not represent anything.

属性~値に照合される %val は、 `ident-token$t または `string-token$t として与えられなければナラナイ。 ◎ Attribute values must be <ident-token>s or <string-token>s.

object[`type^a^="image/"]

a[`href^a$=".html"]

p[`title^a*="hello"]

6.3. 属性~値の文字大小比較

既定では、 選択子の中の 属性~名や属性~値 の文字大小が区別されるかどうかは，文書~言語に依存する。 ◎ By default case-sensitivity of attribute names and values in selectors depends on the document language.

文書~言語に関わらず，属性~値を`~ASCII大小無視$で照合するため、 `属性~選択子$の閉じ角括弧 `005D^U の直前に，識別子 `0069^U を含ませる方法が用意されている。 この~flagが在るときは、 ~UAは，属性の値を`~ASCII大小無視$の下で照合するモノトスル （すなわち， [a-z] と [A-Z] は等価と見なされる）。 ◎ To match attribute values ASCII case-insensitively regardless of document language rules, the attribute selector may include the identifier i before the closing bracket (]). When this flag is present, UAs must match the attribute’s value ASCII case-insensitively (i.e. [a-z] and [A-Z] are considered equivalent).

別法として、 `属性~選択子$の閉じ角括弧 `005D^U の直前に識別子 `0073^U を含めてもヨイ。 この事例では、 ~UAは — 文書~言語に関わらず — `一致-$するかどうか `INFRA$r の下で照合するモノトスル。 ◎ Alternately, the attribute selector may include the identifier s before the closing bracket (]); in this case the UA must match the value case-sensitively, with “identical to” semantics [INFRA], regardless of document language rules.

他の~Selectors構文と同様、 識別子［ `0069^U ／ `0073^U ］自身も`~ASCII大小無視$である。 ◎ Like the rest of Selectors syntax, the i and s identifiers themselves are ASCII case-insensitive.

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

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

注記： 一部の文書~modelは、 大小無視とされる属性~値を正規化して，構文解析-時に［ 文字列が別の文字列に文字大小区別で合致するか検査する ］ことを不可能にする。 "`s^css" ~flagを介した文字大小区別による照合がアリになるのは、 元の文字大小を保全する~systemに限られる。 ◎ Note: Some document models normalize case-insensitive attribute values at parse time such that checking if a string is case-sensitive matching is impossible. Case-sensitive matching via s flags is only possible in systems that preserve the original case.

6.4. 属性~選択子と名前空間

`属性~選択子$の中の属性~名は、 `~CSS有修飾~名$として与えられる： ◎ The attribute name in an attribute selector is given as a CSS qualified name:＼

• 属性~名には、 `宣言-済み$な名前空間~接頭辞を — 名前空間~分離子 `007C^U で分離した上で — 前置してもヨイ。 ◎ a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|).＼
• `XML-NAMES$r に倣い、 `既定の名前空間$は，属性には適用されない。 したがって、 名前空間~成分を伴わない`属性~選択子$の対象になる属性は， どの名前空間にも属さないものに限られる （ `|%att^css【！%attr】 と等価になる）。 ◎ In keeping with the Namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes that have no namespace (equivalent to |attr).＼
• 名前空間~接頭辞として、 ~asterisk（ `*^css ）を利用してもヨイ。 これは、 属性が属する名前空間を問わず，選択子を合致させることを指示する。 ◎ An asterisk may be used for the namespace prefix indicating that the selector is to match all attribute names without regard to the attribute’s namespace.

`属性~選択子$のうち，属性~名に`宣言-済み$でない名前空間~接頭辞を伴うものは、 `無効な選択子$である。 ◎ An attribute selector with an attribute name containing a namespace prefix that has not been previously declared is an invalid selector.

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

6.5. ~DTD内で与えられる属性の既定~値

`属性~選択子$は、 文書~treeの中の属性~値を表現する。 文書~treeがどう構築されるかは、 ~Selectorsの視野から外れる。 一部の文書~形式では，~DTDや他所で属性の既定~値が定義されることもあるが、 それらは，文書~treeに現れない限り `属性~選択子$により選択されることはない。 選択子は、［ 既定~値が文書~tree内で定義される【！included】か否かを問わず，働く ］ように設計されるベキである。 ◎ Attribute selectors represent attribute values in the document tree. How that document tree is constructed is outside the scope of Selectors. In some document formats default attribute values can be defined in a DTD or elsewhere, but these can only be selected by attribute selectors if they appear in the document tree. Selectors should be designed so that they work whether or not the default values are included in the document tree.

例えば、 ~XML~UAは，~DTDの “外部~subset” を読取ってもヨイとされているが、 `要求されてはいない^em。 一方で、 文書の “内部~subset” の中で与えられる［ 属性の既定~値 ］については，その~~検索が`要求されている^em。 （これらの~subsetの定義については，例えば `XML10$r を見よ。） ~DTDの外部~subsetにて定義される［ 属性の既定~値 ］が，文書~treeの中に現れるかどうかは、 ~UAに依存する。 ◎ For example, a XML UA may, but is not required to, read an “external subset” of the DTD, but is required to look for default attribute values in the document’s “internal subset”. (See, e.g., [XML10] for definitions of these subsets.) Depending on the UA, a default attribute value defined in the external subset of the DTD might or might not appear in the document tree.

~XML名前空間を認識する~UAは、［ その名前空間の知識を利用して，属性の既定~値が文書~内に在ったかのように扱ってもヨイ ］とされているが，要求されてはいない。 （例えば、 ~XHTML~UAには，［ 組込みの~XHTML~DTDについての知識を利用する ］ことは要求されていない。 XML 1.0 名前空間の詳細は、 例えば `XML-NAMES$r を見よ。） ◎ A UA that recognizes an XML namespace may, but is not required to use its knowledge of that namespace to treat default attribute values as if they were present in the document. (For example, an XHTML UA is not required to use its built-in knowledge of the XHTML DTD. See, e.g., [XML-NAMES] for details on namespaces in XML 1.0.)

注記： 実装は、 概して，外部~subsetを無視する。 これは、 ~XML仕様にて定義される［ 妥当性を~~検証しない処理器 ］の挙動に対応する。 ◎ Note: Typically, implementations choose to ignore external subsets. This corresponds to the behavior of non-validating processors as defined by the XML specification.

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

EXAMPLE[`radix^a=decimal] { /* …既定の~prop設定… */ }
EXAMPLE[`radix^a=octal]   { /* …他の設定… */ }
◎
EXAMPLE[radix=decimal] { /* ... default property settings ... */ }
EXAMPLE[radix=octal]   { /* ... other settings... */ }

EXAMPLE                { /* …既定の~prop設定… */ }
EXAMPLE[`radix^a=octal]   { /* …他の設定… */ }
◎
EXAMPLE                { /* ... default property settings ... */ }
EXAMPLE[radix=octal]   { /* ... other settings... */ }

6.6. ~class選択子

`~class選択子@ （ `class selector^en ）は［ “終止符” `002E^U, 識別子 ］並びとして与えられる。 それは、 識別子により識別される “~class” に `属する^em要素を表現する†。 ~classは文書~言語が定義する。 例えば `HTML$r, `SVG11$r, `MATHML$r における~classへの所属は， `class^a 属性により与えられる： これらの言語では、 `local^en ††な `class^a 属性に適用される `~=^css 記法 （すなわち， `[class~=%identifier]^css ） と等価になる。 ◎ The class selector is given as a full stop (. U+002E) immediately followed by an identifier. It represents an element belonging to the class identified by the identifier, as defined by the document language. For example, in [HTML5], [SVG11], and [MATHML] membership in a class is given by the class attribute: in these languages it is equivalent to the ~= notation applied to the local class attribute (i.e. [class~=identifier]).

【† 下の例に見られるとおり， 要素は同時に複数の “~class” に属し得る。 】【†† “`local^en” とは、 “~XML名前空間の文脈で要素に局所的” を意味すると思われる。 】

*.pastoral { color: green }  /* all elements with class~=pastoral */

.pastoral { color: green }  /* all elements with class~=pastoral */

h1.pastoral { color: green }  /* H1 elements with class~=pastoral */

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

p.pastoral.marine { color: green }

注記： ~CSSは “class” 属性に かなりの力を与えているので、 作者は，［ 結付けられた呈示が ほとんどない要素 （~HTMLの `div$e や `span$e 要素など） に基づいて自前の “文書~言語” を設計した上で、 “class” 属性を通して~style情報をアテガう ］こともできるが、 この実施は避けるベキである。 文書~言語の構造上の要素は，広く［ 認識されて／受容されて ］いる意味を有することが多い一方で、 作者が定義する~classはそうでないであろうから。 ◎ Note: Because CSS gives considerable power to the "class" attribute, authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as div and span in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

注記： 【文書~言語に複数種の［ ~classの意味論を有する属性］が定義されている下で，】 要素が複数の~class属性を有する場合、 ~classを探索する前に，それらの値を~spaceで連結するモノトスル。 しかしながら、 現時点では，~WGはこのような状況があり得るものと考えていない。 したがって，この挙動は、 この仕様においては規範的とされない。 ◎ Note: If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class. As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification.

`過去互換~mode$の文書に対しては、 ~class名は，`~ASCII大小無視$で照合するモノトスル — 他所における`~class選択子$は，文字大小区別であり、 ~class名が`一致-$しない限り合致しない。 `INFRA$r ◎ When matching against a document which is in quirks mode, class names must be matched ASCII case-insensitively; class selectors are otherwise case-sensitive, only matching class names they are identical to. [INFRA]

6.7. ~ID選択子

文書~言語には、 ~ID型であるものと宣言された属性を包含するものもある。 ~ID型の属性は、 それを有する要素の型を問わず，同じ文書の中で — その文書が文書~言語に適合する限り — 複数のそれが同じ値をとり得ない点で、 特別な~~地位にある。 文書~言語が何であれ、 ~ID型とされた属性は，要素を一意に識別する目的に利用できる。 ~HTMLにおいては、 すべての~ID型の属性は `id^a と命名されている。 ~XML~appは~ID型の属性を異なるものに命名し得るが、 同じ制約が適用される。 要素のどの属性が “~ID属性である” とされるかは，文書~言語が定義する。 ◎ Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element. In HTML all ID attributes are named id; XML applications may name ID attributes differently, but the same restriction applies. Which attribute on an element is considered the “ID attribute“ is defined by the document language.

`~ID選択子@ （ `ID selector^en ）は［ “番号記号” `0023^U, ~ID値 ］並びで記される。 ~ID値は `~CSS識別子$でなければナラナイ。 ~ID選択子は、 その中の識別子に合致する~IDを有する要素~instanceを表現する。 （適合しない文書においては、 同じ~ID選択子に複数の要素が合致することもあり得る。） ◎ An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier. An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector. (It is possible in non-conforming documents for multiple elements to match a single ID selector.)

h1#chapter1

#chapter1

*#z98y

注記： XML 1.0 `XML10$rにおいては、 どの属性が要素の~IDを包含するかについての情報は，［ ~DTDあるいは~schema ］内に包含される。 ~UAは［ ~XMLを構文解析する際に，常に~DTDを読取るとは限らない ］ので、 何が要素~IDを与えるか知り得ないこともある （~UAは，名前空間に特有な知識を有することもあるので、 その場合，どれが当の名前空間~用の~ID属性になるか決定できるが）。 ~stylesheet作者は、 そのような場合もあることが判っているか疑わしいときには， 代わりに通常の`属性~選択子$を利用するベキである — `#p371^css の代わりに `[name=p371]^css 等々。 ◎ Note: In XML 1.0 [XML10], the information about which attribute contains an element’s IDs is contained in a DTD or a schema. When parsing XML, UAs do not always read the DTD, and thus may not know what the ID of an element is (though a UA may have namespace-specific knowledge that allows it to determine which attribute is the ID attribute for that namespace). If a style sheet author knows or suspects that a UA may not know what the ID of an element is, they should use normal attribute selectors instead: [name=p371] instead of #p371.

【文書~言語にて複数種の［~IDの意味論を有する属性］が定義されている下で，】 要素が複数の~ID属性を有する場合、 ~ID選択子の目的においては，それらすべてを当の要素の~IDとして扱うモノトスル。 その種の状況は［ `xml:id^a, DOM3 Core, ~XML~DTD, 名前空間に特有な知識 ］の混成により生じ得る。 ◎ If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. Such a situation could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and namespace-specific knowledge.

`過去互換~mode$の文書に対しては、 ~IDは，`~ASCII大小無視$で照合するモノトスル — 他所における`~ID選択子$は，文字大小区別であり、 ~IDが`一致-$しない限り，合致しない。 `INFRA$r ◎ When matching against a document which is in quirks mode, IDs must be matched ASCII case-insensitively; ID selectors are otherwise case-sensitive, only matching IDs they are identical to. [INFRA]

7.1. 方向性： `dir()^ps 疑似類

`dir()@ps 疑似類は、［ `文書~言語$から決定される 【`内容~言語$の】 方向性【書字~方向】に基づいて，要素を表現する選択子 ］を書くことを作者に許容する。 例えば， `HTML$r は、［ `dir^a 属性, 周囲の~text, その他の要因 ］の組合nに基づいて`要素の方向性を決定する方法＠~HTMLdom#the-directionality$を定義している。 別の例として， `ITS20$r の `its:dir^a 属性や `its:dirRule^e 要素は、 `XML10$r における要素の方向性を定義-可能にする。 ◎ The :dir() pseudo-class allows the author to write selectors that represent an element based on its directionality as determined by the document language. For example, [HTML5] defines how to determine the directionality of an element, based on a combination of the dir attribute, the surrounding text, and other factors. As another example, the its:dir and dirRule element of the Internationalization Tag Set [ITS20] are able to define the directionality of an element in [XML10].

`dir()$ps 疑似類による選択-は、 ~style付け状態に基づかない — 例えば， `direction$p ~propは、 その照合に影響しない。 ◎ The :dir() pseudo-class does not select based on stylistic states—for example, the CSS direction property does not affect whether it matches.

疑似類 `dir(ltr)$ps0 は、 左横書き（ `left-to-right^en ）の方向性 （ `ltr^v ）を備える要素を表現する。 疑似類 `dir(rtl)$ps0 は、 右横書き（ `right-to-left^en ）の方向性 （ `rtl^v ）を備える要素を表現する。 `dir()$ps がとる引数は、 単独の識別子でなければナラナイ。 他の場合、 選択子は無効になる。 識別子と丸括弧の間に`空白$が挟まれていてもよい。 `ltr^v, `rtl^v 以外の値も無効ではないが、 【現時点では】何にも合致しない。 （将来の~markup仕様が他の種類の方向性を定義した場合、 対応する値が許容されるよう，~Selectorsも拡張されるであろう。） ◎ The pseudo-class :dir(ltr) represents an element that has a directionality of left-to-right (ltr). The pseudo-class :dir(rtl) represents an element that has a directionality of right-to-left (rtl). The argument to :dir() must be a single identifier, otherwise the selector is invalid. White space is optionally allowed between the identifier and the parentheses. Values other than ltr and rtl are not invalid, but do not match anything. (If a future markup spec defines other directionalities, then Selectors may be extended to allow corresponding values.)

`:dir(…)^css と `[dir=…]^css の相違は、 後者が遂行する比較は，要素~上の所与の属性に限られる一方で、 `:dir(…)^css 疑似類は，比較を遂行する際に［ 文書の意味論について，~UAが有する知識 ］が利用されることにある。 例えば，~HTMLにおける要素の方向性は、 当の要素が `dir^a 属性を有さない場合でも，［ 妥当な `dir^a 属性を有する先祖が在るならば，それらのうち最も近いもの ］に備わる方向性を継承する。 別の例として， `[dir=auto]^css に合致する~HTMLの要素は、 その内容から解決される方向性に依存して， `dir(ltr)$ps0 または `dir(rtl)$ps0 に合致することになる。 `HTML$r ◎ The difference between :dir(C) and [dir=C] is that [dir=C] only performs a comparison against a given attribute on the element, while the :dir(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison. For example, in HTML, the directionality of an element inherits so that a child without a dir attribute will have the same directionality as its closest ancestor with a valid dir attribute. As another example, in HTML, an element that matches [dir=auto] will match either :dir(ltr) or :dir(rtl) depending on the resolved directionality of the elements as determined by its contents. [HTML5]

7.2. 自然言語： `lang()^ps 疑似類

文書~言語において，要素の`内容~言語$（~~自然言語, ヒトが話す言語）を決定する方法が指定されている場合、 その`内容~言語$に基づく要素を表現する選択子を書くこともアリになる。 `lang()@ps 疑似類は、 その引数として［ 1 個以上の`言語~範囲$たちが成す~commaで分離された~list ］を受容し，要素のうち［ その`内容~言語$が，この~listを成す いずれかの言語~範囲に合致するもの ］を表現する。 `lang()$ps の中の各 `言語~範囲@ （ `language range^en ）は、 妥当な［ `ident$t ／ `string$t ］でなければナラナイ （したがって、 例えば，~asteriskを包含する言語~範囲は、 正しく~escapeする（例： `:lang(\*-Latn)^css）か， 文字列として引用符で括る（例： `:lang("*-Latn")^css ） ことが要求される【！must】。 ◎ If the document language specifies how the (human) content language of an element is determined, it is possible to write selectors that represent an element based on its content language. The :lang() pseudo-class, which accepts a comma-separated list of one or more language ranges, represents an element whose content language is one of the languages listed in its argument. Each language range in :lang() must be a valid CSS <ident> or <string>. (Thus language ranges containing asterisks, for example, must be either correctly escaped or quoted as strings, e.g. :lang(\*-Latn) or :lang("*-Latn").)

注記： 要素の`内容~言語$は、 文書~言語が定義する。 ◎ Note: The content language of an element is defined by the document language.

例えば，~HTML `HTML$r においては、 `内容~言語$は［ `lang＠~HTMLdom#attr-lang$a 属性, `meta$e 要素からの情報, 場合によっては~protocolからの情報（例：~HTTP~headerからの） ］の組合nから決定される 【`参照＠~HTMLdom#language$】。 ~XML言語 `XML10$r においては、 `xml:lang^a 属性を利用して，要素の言語~情報を指示できる。 ◎ For example, in HTML [HTML5], the content language is determined by a combination of the lang attribute, information from meta elements, and possibly also the protocol (e.g. from HTTP headers). XML languages can use the xml:lang attribute to indicate language information for an element. [XML10]

要素の`内容~言語$ %言語 が`言語~範囲$ %範囲 に合致するとは、 %言語 を `BCP47$r 構文として表現する下で， `RFC4647$r `§ 拡張d~filter法＠~RFCx/rfc4647#section-3.3.2$ による演算において %言語 が %範囲 に合致することをいう： ◎ The element’s content language matches a language range if its content language, as represented in BCP 47 syntax, matches the given language range in an extended filtering operation per [RFC4647] Matching of Language Tags (section 3.3.2).＼

• この演算に先立って、［ %言語, %範囲 ］どちらも， `RFC5646$r `§ 言語~tagの正準-化＠~RFCx/rfc5646#section-4.5$ に従って正準-化された `extlang^P 形へ変換するモノトスル。 ◎ Both the content language and the language range must be canonicalized and converted to extlang form as per section 4.5 of [RFC5646] prior to the extended filtering operation.＼
• この照合は、 ~ASCII範囲の中で文字大小無視で遂行される。 ◎ The matching is performed case-insensitively within the ASCII range.
• この比較を遂行する際には、 %範囲 は妥当な言語~codeである必要は無い。 ◎ The language range does not need to be a valid language code to perform this comparison.

• %範囲 ~EQ 空~文字列の場合（ `:lang("")^css ）、 要素のうち言語~tagを伴わない†ものに（限り）合致することになる。 ◎ A language range consisting of an empty string (:lang("")) matches (only) elements whose language is not tagged.

  【† ~HTMLにおいては、［ 要素の`言語を決定-＠~HTMLdom#language$した結果 ~EQ 空~文字列 ］を意味する （要素が `lang^a 属性を有さないこととは同義でないことに注意）。 】

注記： ［ 文書／~protocol ］は、 `BCP47$r またはその後継版の~codeを利用して — 当の形式が~XML `XML10$r に基づく事例では、 `xml:lang^a 属性により — 言語を指示することが推奨される。 “`FAQ： 2 文字または 3 文字の言語~code＠https://www.w3.org/International/questions/qa-lang-2or3.html$” を見よ。 ◎ Note: It is recommended that documents and protocols indicate language using codes from [BCP47] or its successor, and in the case of XML-based formats, by means of xml:lang attributes. [XML10] See “FAQ: Two-letter or three-letter language codes.”

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

`:lang(%C)^css と `|=^css 演算子との相違は、 `|=^css 演算子が遂行する比較は，要素~上の所与の属性に限られる一方、 `:lang(%C)^css 疑似類は，比較を遂行する際に［ 文書の意味論について，~UAが有する知識 ］が利用されることにある。 ◎ Note: One difference between :lang(C) and the |= operator is that the |= operator only performs a comparison against a given attribute on the element, while the :lang(C) pseudo-class uses the UAs knowledge of the document’s semantics to perform the comparison.

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

注記： ~wildcard言語~照合と~commaで分離された~listは、 ~level 4 にて新たに~~導入された。 ◎ Note: Wildcard language matching and comma-separated lists are new in Level 4.

8.1. ~hyperlink： `any-link^ps 疑似類

`any-link@ps 疑似類は、 ~hyperlinkの~source~anchorとして動作する要素を表現する。 例えば `HTML$r においては、 `href$a 属性を伴う どの［ `a$e ／ `area$e ］要素も~hyperlinkであり， `any-link$ps に合致する。 それは、［ `link$ps, `visited$ps ］いずれかに合致する要素に合致し， `:is(:link, :visited)^css と等価になる。 ◎ The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any a or area elements with an href attribute are hyperlinks, and thus match :any-link. It matches an element if the element would match either :link or :visited, and is equivalent to :is(:link, :visited).

8.2. ~link履歴： `link^ps, `visited^ps 疑似類

~UAは、 共通的に，未訪問な`~hyperlink＠#the-any-link-pseudo$を訪問-済みなそれと異なる表示にする。 ~Selectorsは、 それらを判別する疑似類 `link@ps および `visited@ps を供する： ◎ User agents commonly display unvisited hyperlinks differently from previously visited ones. Selectors provides the pseudo-classes :link and :visited to distinguish them:

• `link$ps 疑似類は、 まだ訪問されてない~linkを対象にする。 ◎ The :link pseudo-class applies to links that have not yet been visited.
• `visited$ps 疑似類は、 利用者により訪問-済みな~linkを対象にする。 ◎ The :visited pseudo-class applies once the link has been visited by the user.

~UAは、 一定期間が経過した訪問-済み~linkを未訪問な `link$ps 状態に戻してもヨイ。 ◎ After some amount of time, user agents may choose to return a visited link to the (unvisited) :link state.

2 つの状態は両立し得ない。 ◎ The two states are mutually exclusive.

.footnote:visited

~stylesheet作者が［ 利用者の同意を得ずに利用者が訪問した~siteを調べる目的 ］に［ `link$ps ／ `visited$ps ］疑似類を濫用することもアリなので、 ~UAは，［ ~linkの具現化を訪問-済みか未訪問かに応じて違える ］一方で［ 利用者の~privacyを保全するための措置 ］ — すべての~linkを未訪問な~linkとして扱う, その他の措置 — を実装してもヨイ。 ◎ Since it is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user’s consent, UAs may treat all links as unvisited links or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.

【 例えば，現代のほとんどの~browserにおいては、 `visited^ps に適用し得る~styleは， 他のどの状態にも影響しないもの（色のみ）に限られている （`~~参考＠https://developer.mozilla.org/ja/docs/Web/CSS/Privacy_and_the_:visited_selector$）。 】

8.3. 局所~link： `local-link^ps 疑似類

`local-link@ps 疑似類は、［ ~siteの中での利用者の現在の所在に基づいて，~hyperlinkを~styleする ］ことを作者に許容する。 それは、 `any-link$ps に合致する要素のうち［ その~target~URL — 要素による~hyperlinkの~targetの絶対~URL — は，現在の~URL — 要素が属する文書の~URL — に合致するもの ］を表現する。 ~target~URLが素片を含む場合、 現在の~URLの素片も照合するモノトスル — 含まない場合、 現在の~URLの素片~部位は，この比較に織り込まないとする。 ◎ The :local-link pseudo-class allows authors to style hyperlinks based on the users current location within a site. It represents an element that is the source anchor of a hyperlink whose target’s absolute URL matches the element’s own document URL. If the hyperlink’s target includes a fragment URL, then the fragment URL of the current URL must also match; if it does not, then the fragment URL portion of the current URL is not taken into account in the comparison.

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

8.4. ~target： `target^ps 疑似類

文書~言語によっては、 文書の~URLは、 文書~自体のみならず，~URLの`素片$を介して文書の`中の^em特定の要素を指す。 この仕方で指される要素は、 文書の~target要素とされる。 【例： `HTML$r における`~target要素＠~HTMLnav#target-element$】 ◎ In some document languages, the document’s URL can further point to specific elements within the document via the URL’s fragment. The elements pointed to in this way are the target elements of the document.

`target@ps 疑似類は、 文書の~target要素に合致する。 文書の~URLが素片~識別子を伴わない場合、 文書には~target要素は無い。 ◎ The :target pseudo-class matches the document’s target elements. If the document’s URL has no fragment identifier, then the document has no target elements.

p.note:target

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

8.5. ~target容器： `target-within^ps 疑似類

`target-within@ps 疑似類は、 次を満たす要素に合致する【！適用される】 ⇒ 自身または［ `平坦~tree$における，その ある子孫（~text~nodeなどの非~要素~nodeも含む） ］は、［ `target$ps 疑似類に合致するための条件 ］を満たす ◎ The :target-within pseudo-class applies to any element to which the :target pseudo class applies as well as to any element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :target.

8.6. 視野ng根： `scope^ps 疑似類

一部の文脈 — `DOM$r における `querySelector()$c ~methodを~callするときなど — においては、 選択子は 1 個~以上の`視野ng根$に基づいて照合される。 `scope@ps 疑似類は、 この`視野ng根$を表現し，［ “真の” 要素, “~virtualな” もの（`文書片$など） ］どちらにもなり得る。 ◎ In some contexts, selectors are matched with respect to one or more scoping roots, such as when calling the querySelector() method in [DOM]. The :scope pseudo-class represents this scoping root, and may be either a true element or a virtual one (such as a DocumentFragment).

`視野ng根$が無い場合、 `scope$ps は，`根~要素$【！当の文書の根】を表現する（ `root$ps と等価になる）。 仕様は、 この疑似類が［ `根~要素$ではない，特定の要素 ］に合致することを意図する場合には， `視野ng根$（たち）を定義しなけれナラナイ。 ◎ If there is no scoping root then :scope represents the root of the document (equivalent to :root). Specifications intending for this pseudo-class to match specific elements rather than the document’s root element must define their scoping root(s).

~virtualな`視野ng根$は、 `文書片$の根を表現している何らかの~objであり， それが表現する`文書片$内の根~要素の親として動作する 【文書片に代わって，その内容が成す~node~treeの根として動作する】 — それは、 この`視野ng根$と他の要素との関係性を表現するよう，選択子~pattern内で利用できる。 ~virtualな`視野ng根$は`無特能$であり，当の選択子の`~subject$にはなり得ない。 ◎ A virtual scoping root is some object representing the root of a document fragment, and can be used in selector patterns to represent other elements’ relationships to this scoping root, acting as the parent of any root elements in the document fragment it represents. A virtual scoping root is featureless and cannot be the subject of the selector.

9.1. ~pointer~hover： `hover^ps 疑似類

`hover@ps 疑似類は、［ 利用者が~pointing装置で［ 要素／疑似要素 ］を指していて，実際に作動化させる必要はない間 ］に適用される。 例えば，視覚的な~UAにおいては、 ~cursor（~mouse~pointer）が［ 要素により生成された`~box$ ］上を~hoverしたとき，この疑似類を適用することもできる。 ~hardware制限に因り（例：~pen装置），~hoverを検出できない対話的~UAは、 この機能を~supportしなくとも，`適合性§には反しない — そのような~UAにおいては、 単純に，その種の選択子が何かに合致することは決してないことになる。 ◎ The :hover pseudo-class applies while the user designates an element (or pseudo-element) with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. Interactive user agents that cannot detect hovering due to hardware limitations (e.g., a pen device that does not detect hovering) are still conforming; the selector will simply never match in such a UA.

`平坦~tree$における要素の ある子孫（~text~nodeなどの非~要素~nodeも含む）が，上の条件に合致するならば、 要素も `hover$ps に合致する。 ◎ An element also matches :hover if one of its descendants in the flat tree (including non-element nodes, such as text nodes) matches the above conditions.

文書~言語は、 要素が `hover$ps に合致し得る追加的な仕方を定義してヨイ。 例えば `HTML$r は、 ~labelが付与された~control要素は，その~labelを与えている `label$e 要素が~hoverされたとき， `hover$ps に合致するものと定義している （`~~参照＠~HTMLselectors#selector-hover$）。 ◎ Document languages may define additional ways in which an element can match :hover. For example, [HTML5] defines a labeled control element as matching :hover when its label is hovered.

注記： `hover$ps の状態は、 要素の【！ 子 】子孫が~pointing装置で指されたときにも適用し得るので、 ~pointing装置の直下にない要素に `hover$ps が適用されることも起こり得る。 ◎ Note: Since the :hover state can apply to an element because its child is designated by a pointing device, it is possible for :hover to apply to an element that is not underneath the pointing device.

9.2. 作動化： `active^ps 疑似類

`active@ps 疑似類は、 ~host言語により定義されるとおり［ 利用者により “作動化された” 要素 ］に適用される。 例えば、 ~hyperlinkが誘発されている間。 ◎ The :active pseudo-class applies while an element is being “activated” by the user, as defined by the host language; for example, while a hyperlink is being triggered.

加えて， `active$ps 疑似類は、 ~boxが~pointing装置により能動的に指示されている間にも — それを生成した［ 要素／疑似要素 ］を`問わず^em — 適用される。 能動的とは、 例えば，次のようなときである ⇒＃ 利用者が~mouseの首~buttonを押してから離すまでの間／ 利用者の手指が~touchscreenを押している間【おそらく、一定時間以上，触れている間】。 ◎ In addition, the :active pseudo-class applies while any generated box of any element (or pseudo-element) is being actively indicated by a pointing device (in the “down” state), e.g. between the time the user presses the primary mouse button and releases it, or while a finger is pressing on a touchscreen.

注記： `HTML$r 【！[HTML5]】は、 `~HTML要素が作動化されるための特有な条件＠~HTMLselectors#selector-active$を定義する。 ◎ Note: [HTML5] defines specific conditions for HTML elements to be activated .

`平坦~tree$における 要素のある子孫（~text~nodeなどの非~要素~nodeも含む）が，上の条件に合致するならば、 要素も `active$ps に合致する。 ◎ An element also matches :active if one of its descendants in the flat tree (including non-element nodes, such as text nodes) matches the above conditions.

9.3. 入力~focus： `focus^ps 疑似類

`focus@ps 疑似類は、［ 要素／疑似要素 ］が~focusを得ている （~keyboard~event, あるいは他の形による入力を受容する） 間だけ，適用される。 ◎ The :focus pseudo-class applies while an element (or pseudo-element) has the focus (accepts keyboard or other forms of input).

~focusを獲得できる要素には、［ 文書~言語／実装 ］に特有な制限sがあり得る。 例えば `HTML$r は、 いくつかの`~focus可能な区画$を定義している。 ◎ There may be document language or implementation specific limits on which elements can acquire :focus. For example, [HTML] defines a list of focusable areas.

文書~言語は、 要素が `focus$ps に合致し得る追加的な仕方を定義してヨイが、 `focus$ps 疑似類は，要素の親へ自動的には伝播しないモノトスル — 親への合致-が欲される場合は `focus-within$ps を見よ （他の仕組みに因り伝播される結果， `focus$ps が親~要素に適用されることはあってもよいが、 単に親であるだけでは，そうならないことに注意）。 ◎ Document languages may define additional ways in which an element can match :focus, except that the :focus pseudo class must not automatically propagate to the parent element—see :focus-within if matching on the parent is desired. (:focus may still apply to the parent element if made to propagate due to other mechanisms, but not merely due to being the parent.)

一部の作者からは、 `focus$ps が［ ~form~controlから，それに結付けられた `label$e 要素へ伝播する ］ことが欲されている。 それに対する主な異議は、 実装の困難さに見受けられる。 `397$issue, ~HTMLの`課題 #1632＠~HTMLissue/1632$ を見よ。 ◎ There’s a desire from authors to propagate :focus from a form control to its associated label element; the main objection seems to be implementation difficulty. See CSSWG issue (CSS) and WHATWG issue (HTML).

9.4. ~focus指示-先： `focus-visible^ps 疑似類

`focus$ps `疑似類$は、 常に，現在~focusを得ている要素に合致するが、 ~UAが可視になるよう（ “~focus環” を描くなどにより） `~focusを指示-@ するのは、 様々な経験則を利用して，利用者にとって最も助けになると~~決定したときに限られる。 `focus-visible@ps 疑似類は、 これらの状況に限り，~focusを得ている［ 要素／疑似要素 ］に合致する — それは、 ~focus指示子が`いつ^em現れるかを変更することなく， 当の~focus指示子の外観を変更することを作者に許容する。 ◎ While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element (or pseudo-element) in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears.

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

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

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

~UAは、 既定の~focus~styleを指定するときも `focus-visible$ps を利用するベキである — `focus-visible^ps を利用している作者が既定の `focus$ps ~styleも不能化する必要がなくなるよう。 ◎ User agents should also use :focus-visible to specify the default focus style, so that authors using :focus-visible will not also need to disable the default :focus style.

9.5. ~focus容器： `focus-within^ps 疑似類

`focus-within@ps 疑似類は、 次を満たす［ 要素／疑似要素 ］に合致する【！適用される】 ⇒ 自身または［ `平坦~tree$における，その ある子孫（~text~nodeなどの非~要素~nodeも含む） ］は、［ `focus$ps 疑似類に合致するための条件 ］を満たす ◎ The :focus-within pseudo-class applies to any element (or pseudo-element) for which the :focus pseudo class applies, as well as to an element (or pseudo-element) whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus.

10.1. 現在-要素： `current^ps 疑似類

`current@ps 疑似類は、 次に該当する要素を表現する ⇒ 現在~表示されている要素, または【および？】その先祖である ◎ The :current pseudo-class represents the element, or an ancestor of the element, that is currently being displayed.

関数-形の `current()@ps 疑似類もあり、 `is()$ps と同様に，`複合-選択子$たちが`成す~list$を引数にとる。 この場合、 %E を `current$ps 要素とするとき， %E が引数にも合致するならば %E 自身を表現し、 合致しない場合は［ %E の先祖であって, 引数に合致する要素のうち %E に最も近い先祖 ］を表現する（どれにも合致しない場合は何も表現しない）。 ◎ Its alternate form :current(), like :is(), takes a list of compound selectors as its argument: it represents the :current element that matches the argument or, if that does not match, the innermost ancestor of the :current element that does. (If neither the :current element nor its ancestors match the argument, then the selector does not represent anything.)

【 `current$ps 要素 — 例えば `elem:current(…)^css の様に記されているとき，“最も近い先祖” は `elem^css 型でもなければならないのか？ それとも `elem^css 型の `current^ps 要素の先祖のうち引数に合致するような “最も近い先祖” なのかどっち？ 】

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

10.2. 過去-要素： `past^ps 疑似類

`past@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素~全体が `current$ps 要素より先に生じるものと定義されているもの。 例えば、 ~WebVTT仕様は， `past$ps 疑似類を 【！http://dev.w3.org/html5/webvtt/】 `~media要素の現在の再生~位置に相対的＠https://w3c.github.io/webvtt/#the-past-and-future-pseudo-classes$であるものと定義する。 ◎ The :past pseudo-class represents any element that is defined to occur entirely prior to a :current element.＼ For example, the WebVTT spec defines the :past pseudo-class relative to the current playback position of a media element.＼

文書~言語に要素の時系列順が定義されていない場合、 これは `current$ps 要素に先行するすべての同胞~要素を表現する。 ◎ If a time-based order of elements is not defined by the document language, then this represents any element that is a (possibly indirect) previous sibling of a :current element.

10.3. 未来-要素： `future^ps 疑似類

`future@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素~全体が `current$ps 要素より後に生じるものと定義されているもの。 例えば、 ~WebVTT仕様は， `future$ps 疑似類を `~media要素の現在の再生~位置に相対的＠https://w3c.github.io/webvtt/#the-past-and-future-pseudo-classes$であるものと定義する。 ◎ The :future pseudo-class represents any element that is defined to occur entirely after a :current element.＼ For example, the WebVTT spec defines the :future pseudo-class relative to the current playback position of a media element.＼

文書~言語により要素の時系列順が定義されていない場合、 これは `current$ps 要素に後続するすべての同胞~要素を表現する。 ◎ If a time-based order of elements is not defined by the document language, then this represents any element that is a (possibly indirect) next sibling of a :current element.

11.1. ~media再生-状態： `playing^ps, `paused^ps, `seeking^ps 疑似類

`playing@ps 疑似類は、 次に該当する要素を表現する ⇒ ［ “再生する”, “静止する” ］能力を有していて， “再生している” もの （これには、 明示的に “再生されている” 状態の他にも，［ “~bufferしている”, “停滞した” ］など、［ 利用者の意図によらない何らかの事由 ］で一時的に停止されていて，［ その事由が解決された時点で自動的に再開する状態 ］も含まれる。） ◎ The :playing pseudo-class represents an element that is capable of being “played” or “paused”, when that element is “playing”. (This includes both when the element is explicitly playing, and when it’s temporarily stopped for some reason not connected to user intent, but will automatically resume when that reason is resolved, such as a “buffering” or “stalled” state.)

`paused@ps 疑似類は、 次に該当する要素を表現する ⇒ ［ “再生する”, “静止する” ］能力を有していて， “静止している” もの （これには、 明示的に “静止された” 状態の他にも，［ “読込まれたが、 まだ作動化されていない” ことにより，再生していない状態 ］も含まれる）。 ◎ The :paused pseudo-class represents an element that is capable of being “played” or “paused”, when that element is “paused” (i.e. not ”playing”). (This includes both an explicit “paused” state, and other non-playing states like “loaded, hasn’t been activated yet”, etc.)

`seeking@ps 疑似類は、 次に該当する要素を表現する ⇒ “~seekする” 能力を有していて，~seekしているもの。 （ ~HTMLの［ `audio$e ／ `video$e ］要素に対しては、 `HTML$r `§ ~seek法＠~HEmedia#seeking$ を見よ。） ◎ The :seeking pseudo-class represents an element that is capable of ”seeking” when that element is ”seeking”. (For the audio and video elements of HTML, see HTML § 4.8.11.9 Seeking.)

11.2. ~media読込ng状態： `buffering^ps, `stalled^ps 疑似類

`buffering@ps 疑似類は、 次に該当する要素を表現する ⇒ ［ “再生する”, “静止する” ］能力を有していて，`~media~data$を得するよう能動的に試みているが、 再生を再開するに十分な~dataを得していないので，再生し続けられないもの。 （要素は、 “~bufferしている” ときでも， “再生している” ものと見なされることに注意。 `buffering$ps に合致する要素は `playing$ps にも合致する。） ◎ The :buffering pseudo-class represents an element that is capable of being “played” or “paused”, when that element cannot continue playing because it is actively attempting to obtain media data but has not yet obtained enough data to resume playback. (Note that the element is still considered to be “playing” when it is “buffering”. Whenever :buffering matches an element, :playing also matches the element.)

`stalled@ps 疑似類は、 次に該当する要素を表現する ⇒ “再生する” 能力を有していて， `~media~data$を得するよう能動的に試みているが、 ある量の時間~内に~dataを受信するのに失敗したので，再生し続けられないもの。 （~HTMLの［ `audio$e ／ `video$e ］要素に対しては、 この時間~量は `~media要素の停滞-制限時間$と称される `HTML$r 。） （ `buffering$ps 疑似類と同様に，要素は、 “停滞している” ときでも， “再生している” ものと見なされることに注意。 `stalled$ps に合致する要素は `playing$ps にも合致する。） ◎ The :stalled pseudo-class represents an element when that element cannot continue playing because it is actively attempting to obtain media data but it has failed to receive any data for some amount of time. For the audio and video elements of HTML, this amount of time is the media element stall timeout. [HTML] (Note that, like with the :buffering pseudo-class, the element is still considered to be “playing” when it is “stalled”. Whenever :stalled matches an element, :playing also matches the element.)

11.3. 音響~状態： `muted^ps, `volume-locked^ps 疑似類

`muted@ps 疑似類は、 次に該当する要素を表現する ⇒ 音響を鳴らす能力を有しているが、 現在 “消音されて” 【！(forced silent)】いるもの。 （~HTMLの［ `audio$e ／ `video$e ］要素~用には、 `消音-＠~HEmedia#concept-media-muted$ `HTML$r を見よ。） ◎ The :muted pseudo-class represents an element that is capable of making sound, but is currently “muted“ (forced silent). (For the audio and video elements of HTML, see muted. [HTML])

`volume-locked@ps 疑似類は、 次に該当する要素を表現する ⇒ 音響を鳴らす能力を有しているが、 現在は［ ~UA／利用者 ］により音量は “~lockされて” いるので，~page作者は それを変更できないもの。 （~HTMLの［ `audio$e ／ `video$e ］要素~用には，要素の`実効~media音量$を設定する~algo `HTML$r を見よ。） ◎ The :volume-locked pseudo-class represents an element that is capable of making sound, and currently has its volume "locked" by the UA or the user, so the page author cannot change it. (For the audio and video elements of HTML, see the algorithm for setting the element’s effective media volume. [HTML])

12.1. 開閉~状態： `open^ps, `closed^ps 疑似類

`open@ps 疑似類は、 次に該当する要素を表現する ⇒ ［ “開な”, “閉な” ］両~状態をとり得るが， 現在は “開な” 状態にあるもの。 ◎ The :open pseudo-class represents an element that has both “open” and “closed” states, and which is currently in the “open” state.

`closed@ps 疑似類は、 次に該当する要素を表現する ⇒ ［ “開な”, “閉な” ］両~状態をとり得るが， 現在は “閉な” 状態にあるもの。 ◎ The :closed pseudo-class represents an element that has both “open” and “closed” states, and which is currently in the closed state.

［ “開な”, “閉な” ］が正確に何を意味するかは，~host言語に特有であるが、 例えば~HTMLの［ `details$e, `select$e, `dialog$e ］などの要素は，もっと内容を表示するよう “開な” 状態に~toggleできる （ `dialog$e の事例では、 内容~すべてが，表示されるかされないか）。 ◎ Exactly what “open” and “closed” mean is host-language specific, but exemplified by elements such as HTML’s details, select, and dialog elements, all of which can be toggled “open” to display more content (or any content at all, in the case of dialog).

注記： ［ “開な” ／ “閉な” ］は、 意味論上の状態である。 現在~表示されてない要素 （例： `visibility$p が `collapse^v にされたもの／ `display$p が `none^v にされた下位treeに属するもの） であっても、 “開な” 状態になり得る — その場合、 `open$ps に合致することになる。 ◎ Note: Being “open” or “closed” is a semantic state. An element not currently being displayed (for example, one that has visibility: collapse, or belongs to a display: none subtree) can still be “open” and will match :open.

12.2. ~modal（排他的なヤリトリ）状態： `modal^ps 疑似類

`modal@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素が退けられるまでは、 要素の外側における すべてのヤリトリを除外する状態にある。 ◎ The :modal pseudo-class represents an element which is in a state that excludes all interaction with elements outside it until it has been dismissed.＼

`modal$ps には複数の要素が同時に合致し得るが、 作動中にある（入力を受取れる）ものは，それらのうち 1 つに限られる。 ◎ Multiple elements can be :modal simultaneously, with only one of them active (able to receive input).

12.3. ~fullscreen呈示~状態： `fullscreen^ps 疑似類

`fullscreen@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素は，~screenのほとんど（通例的には すべて）を占める~modeで表示されている — 例えば、 `FULLSCREEN$r ~APIにて定義されるものなど。 ◎ The :fullscreen pseudo-class represents an element which is displayed in a mode that takes up most (usually all) of the screen, such as that defined by the Fullscreen API. [FULLSCREEN]

12.4. ~picture-in-picture呈示~状態： `picture-in-picture^ps 疑似類

`picture-in-picture@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素は，表示域のほとんど（通例的には すべて）を占める~modeで表示されていて、 要素が他の内容~越しに表示されている間， 表示域は~screenの一部に限定されている — 例えば、 `picture-in-picture$r ~API を利用しているとき。 ◎ The :picture-in-picture pseudo-class represents an element which is displayed in a mode that takes up most (usually all) of the viewport, and whose viewport is confined to part of the screen while being displayed over other content, for example when using the Picture-in-Picture API. [picture-in-picture]

13.1. 入力~controlの状態

13.2. 入力~値の状態

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

13.3. 入力~値の検査-法

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

14.1. `root^ps 疑似類

`root@ps 疑似類は、 `根~要素$を表現する。 例えば，~DOM文書においては、 `文書~要素$に合致する。 ◎ The :root pseudo-class represents an element that is the root of the document. ◎ For example, in a DOM document, the :root pseudo-class matches the document element. In HTML, this will be the html element (unless scripting has been used to modify the document).

14.2. `empty^ps 疑似類

`empty@ps 疑似類は、 `文書~空白~文字$を除き， “空” な（子が無い）要素を表現する。 文書~treeの用語で言えば、 要素が “空” かどうかに影響するものは，要素~nodeおよび［ 内容~node（~text~nodeや実体~参照など）のうち長さ 0 でない~dataを含むもの ］に限られ， 他の~node（~commentや処理命令など）は影響しないモノトスル。 `DOM$r ◎ The :empty pseudo-class represents an element that has no children except, optionally, document white space characters. In terms of the document tree, only element nodes and content nodes (such as [DOM] text nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness; comments, processing instructions, and other nodes must not affect whether an element is considered empty or not.

【 現代の~DOM（すなわち `DOM$r ）においては， 実体~参照（ `EntityReference$I ）は廃されたので、 影響するものは［ 要素（ `Element$I ）, ~text（ `Text$I ） ］に限られる （実体参照を利用する~XML文書においては、 置換-後の状態に基づいて解釈されることになろう）。 また， “他の~node” に該当するものは、［ ~comment（ `Comment$I ）, 処理命令（ `ProcessingInstruction$I ）, 文書（ `Document$I ）, 文書片（ `DocumentFragment$I ）, ~doctype（ `DocumentType$I ） ］に限られる。 】

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

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

注記： `~level 2$, `~level 3$ では、 `empty^ps は，空白のみを包含する要素には合致していなかった。 これは、変更された： ~HTMLにおいては、 空白は広く縮約-可能であり，~source~codeの整形~用に利用される — とりわけ，終了~tagが省略された要素は、 そのような空白を およそ~DOM~text内容に吸収する。 そのため、［ 作者が空と知覚する多くの要素は、 期待されるとおり，この選択子で選択できる ］よう変更された。 ◎ Note: In Level 2 and Level 3 of Selectors, :empty did not match elements that contained only white space. This was changed so that that—given white space is largely collapsible in HTML and is therefore used for source code formatting, and especially because elements with omitted end tags are likely to absorb such white space into their DOM text contents—elements which authors perceive of as empty can be selected by this selector, as they expect.

14.3. 子付番 疑似類

この節にて定義される疑似類は、 要素の`同胞~群$における付番 【要素はその同胞~群の中で何個目に~~位置するか】 に基づいて選択する。 ◎ The pseudo-classes defined in this section select elements based on their index amongst their inclusive siblings.

注記： `~level 3$ では、 これらの選択子を，［［［ 要素の親の，子~list ］における，要素の付番 ］に基づいて要素を選択するもの ］として述べていた （この記述は、 この節~自体, および いくつかの疑似類の下でも，生き残る）。 が、 要素の親が無いあるいは要素でない場合を除外する理由はないので、 `同胞~群$の中での要素の相対的な付番と言い換えられた。 ◎ Note: Selectors 3 described these selectors as selecting elements based on their index in the child list of their parents. (This description survives in the name of this very section, and the names of several of the pseudo-classes.) As there was no reason to exclude them from matching elements without parents, or with non-element parents, they have been rephrased to refer to an element’s relative index amongst its siblings.

要素 %E の `同胞~群@ とは、 %E と`広義-同胞$の関係にある要素たちが成す，`~tree順序$による集合である （ %E 自身は常に含まれる）。 単に “同胞~群” と記されたときは、 文書~tree内のある要素の`同胞~群$を意味する。

【 この用語は、 以下を簡潔に述べるために，この訳に導入している。 定義により、 親が要素でない要素であっても，その`同胞~群$は要素を含む （例：`文書~要素$の同胞~群は、それ自身のみからなる）。 】

:nth-child(even)   /* 2, 4, 6, … 個目の要素を表現する */
:nth-child(10n-1)  /* 9, 19, 29, … 個目の要素を表現する */
:nth-child(10n+9)  /* 同じ */
:nth-child(10n+-1) /* 構文が妥当でないので無視される */◎
:nth-child(even)   /* represents the 2nd, 4th, 6th, etc elements
:nth-child(10n-1)  /* represents the 9th, 19th, 29th, etc elements */
:nth-child(10n+9)  /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */

: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;
}

tr:nth-last-child(-n+2)  /* 
~HTML~table内の最後の 2 本の~rowを表現する
◎
represents the two last rows of an HTML table
 */

foo:nth-last-child(odd)  /* 
`同胞~群$の中で，最後から数えて，奇数~個目に在る `foo^e 要素を表現する
◎
represents all odd foo elements in their parent element, counting from the last one
 */

div > p:first-child

<p> .note の前の最後の P</p>
<div class="note">
<p> .note 内の最初の P</p>
</div>◎
<p> The last P before the note.</p>
<div class="note">
<p> The first P inside the note.</p>
</div>

<p> .note の前の最後の P</p>
<div class="note">
<h2> Note </h2>
<p> .note 内の最初の P</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^e は任意の要素の最初の子~要素
◎
a is first child of any element
 */
a:first-child       /* 
同じ（ `a^e は`根~要素$でないとする）
◎
Same (assuming a is not the root element)
 */

ol > li:last-child

14.4. 有型 子付番 疑似類

この節に与える`疑似類$は，`子付番 疑似類§に類似するが、 `同じ型の要素＠#type-selectors$たちに~~限定された中で，`同胞~群$における要素の付番に基づいて解決される。 ◎ The pseudo-classes in this section are similar to the Child Index Pseudo-classes, but they resolve based on an element’s index among elements of the same type (tag name) in their sibling list.

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

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

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

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>

tr > td:last-of-type

15.1. 子孫~結合子 ( ~space )

文書~treeの中で，別の要素の子孫であるような要素を記述する選択子が求まれることがある （例： “ `h1^e 要素に包含されている `em^e 要素” ）。 `子孫~結合子@ （ `descendant combinator^en ）は、 その種の関係性を表出する。 ◎ At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an em element that is contained within an H1 element"). The descendant combinator expresses such a relationship.

`子孫~結合子$は、 2 つの`複合-選択子$を分離する空白で記される。 ◎ A descendant combinator is whitespace that separates two compound selectors.

［ `A B^css ］の形による選択子は、 ある `A^e 要素を先祖とする，任意な子孫 `B^e 要素を表現する。 ◎ A selector of the form A B represents an element B that is an arbitrary descendant of some ancestor element A.

h1 em

<h1>この<span class="myclass">~~見出し行は
<em>とても</em>重要です</span></h1>

div * p

div p *[`href^a]

15.2. 子~結合子 ( `>^css )

`子~結合子@ （ `child combinator^en ）は、 要素と要素の親子関係を記述し， 2 つの`複合-選択子$を分離する “大なり記号” — `003E^U0, `>@css — で記される。 ◎ A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) code point and separates two compound selectors.

body > p

div ol>li p

要素の最初の子を選択するような類いのものについては、 上述の`~tree構造上の疑似類§を見よ。 ◎ For information on selecting the first child of an element, please see the section on the :first-child pseudo-class above.

15.3. 直後~同胞~結合子 ( `+^css )

`直後~同胞~結合子@ （ `next-sibling combinator^en ）は、 2 つの`複合-選択子$を分離する “正符号” — `002B^U0, `+@css — で記される。 この 2 つの`複合-選択子$で表現される要素は、 文書~treeの中で同じ親を共有し， 1 個目の`複合-選択子$で表現される要素が 2 個目のもので表現される要素の直前に在る。 非~要素~node（例：要素~間に挟まれた~text）は、 要素の隣接性を考慮する際には無視される。 ◎ The next-sibling combinator is made of the “plus sign” (U+002B, +) code point that separates two compound selectors. The elements represented by the two compound selectors share the same parent in the document tree and the element represented by the first compound selector immediately precedes the element represented by the second one. Non-element nodes (e.g. text between elements) are ignored when considering the adjacency of elements.

math + p

h1.opener + h2

15.4. 後続~同胞~結合子 ( `~^css )

`後続~同胞~結合子@ （ `subsequent-sibling combinator^en ）は、 2 つの`複合-選択子$を分離する “~tilde” — `007E^U0, `~@css — で記される。 この 2 つの`複合-選択子$で表現される要素は、 文書~treeの中で同じ親を共有し， 1 個目の`複合-選択子$で表現される要素が， 2 個目のもので表現される要素よりも先行する（直前でなくともよい）。 ◎ The subsequent-sibling combinator is made of the "tilde" (U+007E, ~) code point that separates two compound selectors. The elements represented by the two compound selectors share the same parent in the document tree and the element represented by the first compound selector precedes (not necessarily immediately) the element represented by the second one.

h1 ~ pre

<h1>~~関数 a の~~定義</h1>
<p>この表のすべての図には~~関数 a(x) を~~適用すること。</p>
<pre>function a(x) = 12x/13.5</pre>

16.1. ~column結合子（ `||^css ）

`~column結合子@ （ `column combinator^en ）は、 ~column要素 【［行／列］主導の階層的~markup言語の下で［列／行］を指示する要素】 が表現する~columnへの~cell要素の所属関係を表現し， 2 個の `007C^U 並び — `||@css — で記される。 ~columnへの所属は，文書~言語の意味論のみに基づいて決定される — 要素が呈示されるかどうかや, どう呈示されるかを問わず。 複数の~columnに属する~cell要素は、 それらのどの~columnへの所属を指示する選択子でも，表現される。 ◎ The column combinator, which consists of two pipes (||) represents the relationship of a column element to a cell element belonging to the column it represents. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating membership in any of those columns.

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()^ps 疑似類

疑似類~記法 `nth-col(~AnB)@ps は、 同胞の~column間で~AnBthの~columnに属する~cell要素を表現する。 ~columnへの所属の定義は、 `~column結合子$を見よ。 ◎ The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns. ◎ The CSS Syntax Module [CSS3SYN] defines the An+B notation.

16.3. `nth-last-col()^ps 疑似類

疑似類~記法 `nth-last-col(~AnB)@ps は、 同胞†の~column間で最後から~AnBthの~columnに属する~cell要素を表現する。 ~columnへの所属の定義は、 `~column結合子$を見よ。 【†どの~columnが互いに “同胞” とされるかについては、文書~言語が定義することになるであろう。】 ◎ The :nth-last-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns. ◎ The CSS Syntax Module [CSS3SYN] defines the An+B notation.

18.1. `forgiving-selector-list^t

旧来の理由から、 一般に，選択子~listは、 ~list内に構文解析に失敗した選択子がある場合には （一例として、［ 新たな／~UAに特有な ］選択子~特能を利用しているもの），［ 当の選択子~list全体が無効になる ］よう挙動する。 この挙動は、 旧い~UAでも正しく働く~CSSを書くときに，新たな選択子を利用するのを難しくし得る。 ◎ For legacy reasons, the general behavior of a selector list is that if any selector in the list fails to parse (because it uses new or UA-specific selector features, for instance), the entire selector list becomes invalid. This can make it hard to write CSS that uses new selectors and still works correctly in older user agents.

`forgiving-selector-list@t 生成規則は，代わりに、 ~list内の各~選択子を個別に構文解析して，それに失敗したものを単純に無視する — 残りの選択子は、 依然として利用できるようになる。 ◎ The <forgiving-selector-list> production instead parses each selector in the list individually, simply ignoring ones that fail to parse, so the remaining selectors can still be used.

注記： ~style規則は、 依然として，通常の寛容でない［ 選択子~listの挙動 ］を利用する。 `forgiving-selector-list$t は、［ `is()$ps, `where()$ps ］内に限り利用される。 ~style規則の選択子を `is()$ps 内に包装することは — 詳細度に対しても小さな含意があるが — 実質的に，それを寛容なものに “昇格する” — それが疑似要素を包含していない限り （疑似要素は［ `is()$ps, `where()$ps ］においては妥当でない）。 ◎ Note: Style rules still use the normal, unforgiving selector list behavior. <forgiving-selector-list> is used in :is() and :where() only. Although it does have some minor implications on specificity, wrapping a style rule’s selector in :is() effectively "upgrades" it to become forgiving, so long as it doesn’t contain any pseudo-elements (which aren’t valid in :is() or :where()).

`forgiving-selector-list$t は、 構文上は `any-value$t? と等価であるが、 その実際の値は，`選択子~listとして寛容に構文解析する$ことにより得される。 ◎ Syntactically, <forgiving-selector-list> is equivalent to <any-value>?. It is then parsed as a forgiving selector list to obtain its actual value.

`forgiving-selector-list$t を成す無効な~itemに対しては （明示的に未知な［ 選択子／構文 ］を利用しているものも， 【！merely contextually,】 既知な構文を利用しているが当の文脈においては妥当でないものも）、 その`詳細度$は 0 になるものとして扱うモノトスル。 ◎ Any items in a <forgiving-selector-list> that are invalid (whether explicitly, by using unknown selectors or syntax, or merely contextually, using known syntax but in an invalid context) must be treated as having zero specificity.

注記： `forgiving-selector-list$t を利用するものが， 選択子~引数をとる選択子のうち［ `is()$ps, `where()$ps ］に限られるのは、 意図的である。 ◎ Note: <forgiving-selector-list> is intentionally used only in :is() and :where(), not in any other selector that takes a selector argument.

19.1. 選択子の構文解析-法

19.2. 相対~選択子の構文解析-法

19.3. 要素に対し選択子を照合する

19.4. 疑似要素に対し選択子を照合する

19.5. ~treeに対し選択子を照合する