1. 序論
~INFORMATIVE`選択子$とは、木~構造の中の要素を対象に,要素が選択子に合致するかどうかを~testするための、~boolean述語である。 ◎ A selector is a boolean predicate that takes an element in a tree structure and tests whether the element matches the selector or not.
これらの式には多くの用途がある: ◎ These expressions may be used for many things:
- `DOM$r にて定義される `element.matches()^c 関数などにおいて,要素が何らかの判定基準に合致するかどうかを直に~testする。 ◎ directly on an element to test whether it matches some criteria, such as in the element.matches() function defined in [DOM]
- `DOM$r にて定義される `document.querySelectorAll()^c 関数や, あるいは~CSS~style規則の選択子を通して、要素が成す~node木~全体から,判定基準に合致する要素の集合に絞込む。 ◎ applied to an entire tree of elements to filter it into a set of elements that match the criteria, such as in the document.querySelectorAll() function defined in [DOM] or the selector of a CSS style rule.
- HAML や Emmet などのように、“逆向き” に用いて,与えられた選択子に合致するような~markupを生成する。 ◎ used "in reverse" to generate markup that would match a given selector, such as in HAML or Emmet.
~Selectors~Level 1, 2, 3 は、それぞれ CSS1, CSS2.1, ~Selectors~Level 3 仕様に規定され,これらは選択子の機能性の~subsetであるものとして定義される。 この~moduleは~Selectors~Level 4 を規定する。 【~Levelなしの “~Selectors” は、これら各~levelの仕様の総称を表す。】 ◎ Selectors Levels 1, 2, and 3 are defined as the subsets of selector functionality defined in the CSS1, CSS2.1, and Selectors Level 3 specifications, respectively. This module defines Selectors Level 4.
1.1. ~module間の相互作用
この~moduleは、 `SELECT$r, `CSS21$r にて~CSS用に定義された選択子の定義を置き換え, その集合を拡張する。 ◎ This module replaces the definitions of and extends the set of selectors defined for CSS in [SELECT] and [CSS21].
具現化~木の中の抽象的な要素を定義する`疑似要素$選択子は、この仕様の一部を成すものではない: 汎用~構文についてはここで述べられるが、それらの具現化~modelとの密接な統合, および~DOM queries 他の無関係な用途などに因り、他の~moduleにて定義されることになる。 ◎ 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.
【この訳に固有の表記規約】
この訳に利用される記号 ε, ~LET, ~EQ, ~ON, ~IF, ~RET, 等々の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。
2. 選択子の概観
この節は規範的ではなく,後続の節を要約するものに過ぎない。 ◎ This section is non-normative, as it merely summarizes the following sections.
【 “選択子” という対訳に馴染みが悪ければウィンドウ下端の切り替え機能を利用されたし。 】
選択子は、構造を表現する。 この構造は、文書~木の中でどの要素が選択子に合致するかを決定するための条件として(例えば~CSS規則における), あるいは その構造に対応する~HTMLや~XMLを成す素片の平坦な記述として,利用し得る。 ◎ A selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.
選択子の表現力は、単純な要素~名から多彩な文脈上の表現までに渡る。 ◎ Selectors may range from simple element names to rich contextual representations.
選択子の構文は,次の一覧に要約される: ◎ The following table summarizes the Selector syntax:
【
以下において, “ ~E 要素” とは、型(~tag名)が ~E である要素を意味する。
】
【
“分類” の~~見出しは訳者による追加。
】
分類 | |||
---|---|---|---|
~pattern◎ Pattern | 表現される`選択対象$◎ Represents | 節◎ Section | ~Level |
`基本的な選択子§ | |||
`*^css | 任意の要素 ◎ any element | `全称~選択子§ | 2 |
`~E^css | 任意の ~E 要素 ◎ an element of type E | `型(~tag名)選択子§ | 1 |
`論理的な組合せ§ | |||
~E:not(%s1, %s2, ...)
| `合体~選択子$ %s1, %s2 の両者に合致しない ~E 要素 ◎ an E element that does not match either compound selector s1 or compound selector s2 | `否定~疑似類§ | 3/4 |
~E:matches(%s1, %s2, ...)
| `合体~選択子$ %s1, %s2 の少なくとも一方には合致する ~E 要素 ◎ an E element that matches compound selector s1 and/or compound selector s2 | `論理和 疑似類§ | 4 |
~E:something(%s1, %s2, ...)
| `合体~選択子$ %s1, %s2 の少なくとも一方には合致する ~E 要素 【詳細度を増やさない `matches()^ps 】 ◎ an E element that matches compound selector s1 and/or compound selector s2 | `詳細度~調整 疑似類§ | 4 |
~E:has(%rs1, %rs2, ...)
| ~E を `~scope_ps要素$とした下で, %rs1, %rs2 のいずれかを`相対~選択子$として評価したときに、何らかの要素に合致するような, ~E ◎ an E element, if either of the relative selectors rs1 or rs2, when evaluated with E as the :scope elements, match an element | `関係上の疑似類§ | 4 |
`属性~選択子§ | |||
~E.%warning
| %warning ~class に属する ~E 要素 (要素が属する~classがどのように決定されるかは,文書~言語により指定される)。 ◎ an E element belonging to the class warning (the document language specifies how class is determined). | `~class選択子§ | 1 |
~E#%myid
| ~IDが %myid に一致する ~E 要素 ◎ an E element with ID equal to myid. | `~ID選択子§ | 1 |
~E[`foo^a]
| `foo^a 属性を有する ~E 要素 ◎ an E element with a foo attribute | `属性~存在0/属性~値~選択子§ | 2 |
~E[`foo^a="%bar"]
| `foo^a 属性~値が %bar に一致する ~E 要素 ◎ an E element whose foo attribute value is exactly equal to bar | `属性~存在0/属性~値~選択子§ | 2 |
~E[`foo^a="%bar" i]
| `~ASCII大小無視$の下で, `foo^a 属性~値が %bar に一致する ~E 要素 ◎ an E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar | `属性~値の文字大小区別§ | 4 |
~E[`foo^a~="%bar"]
| `foo^a 属性~値を`空白$区切りで分割したときに,いずれかの項が %bar に一致する ~E 要素 ◎ an E element whose foo attribute value is a list of whitespace-separated values, one of which is exactly equal to bar | `属性~存在0/属性~値~選択子§ | 2 |
~E[`foo^a^="%bar"]
| `foo^a 属性~値が文字列 %bar から始まる ~E 要素 ◎ an E element whose foo attribute value begins exactly with the string bar | `部分照合 属性~選択子§ | 3 |
~E[`foo^a$="%bar"]
| `foo^a 属性~値が文字列 %bar で終わる ~E 要素 ◎ an E element whose foo attribute value ends exactly with the string bar | `部分照合 属性~選択子§ | 3 |
~E[`foo^a*="%bar"]
| `foo^a 属性~値が %bar を部分文字列として包含する ~E 要素 ◎ an E element whose foo attribute value contains the substring bar | `部分照合 属性~選択子§ | 3 |
~E[`foo^a|="%en"]
| `foo^a 属性~値を~hyphen区切りで分割したときに,その最初の項が %en に一致する ~E 要素 ◎ an E element whose foo attribute value is a hyphen-separated list of values beginning with en | `属性~存在0/属性~値~選択子§ | 2 |
`自然言語に関する疑似類§ | |||
`~E:dir(ltr)^css | 方向性が left-to-right の ~E 要素 (方向性がどのように決定されるかは文書~言語が指定する) ◎ an element of type E with left-to-right directionality (the document language specifies how directionality is determined) | `方向性 疑似類§ | 4 |
`~E:lang(zh, "*-hant")^css | 言語~tagが[ 標準中国語(そのどの方言/書記体系も含む), あるいは繁体字で書かれたもの ]として付与された下にある ~E 要素 ◎ an element of type E tagged as being either in Chinese (any dialect or writing system) or otherwise written with traditional Chinese characters | `自然言語 疑似類§ | 2/4 |
`所在 疑似類§( 以下における “~link” とは、~hyperlinkの~source~anchorを意味する ) | |||
`~E:any-link^css | ~linkである ~E 要素 ◎ an E element being the source anchor of a hyperlink | `~hyperlink疑似類§ | 4 |
`~E:link^css | ~targetが未訪問の~linkである ~E 要素 ◎ an E element being the source anchor of a hyperlink of which the target is not yet visited | `~link履歴 疑似類§ | 1 |
`~E:visited^css | ~targetが訪問-済み~linkである ~E 要素 ◎ an E element being the source anchor of a hyperlink of which the target is already visited | `~link履歴 疑似類§ | 1 |
`~E:local-link^css | 現在の~URLを~targetにしている~linkである ~E 要素 ◎ an E element being the source anchor of a hyperlink targetting the current URL | `局所~link疑似類§ | 4 |
`~E:target^css | 現在の~URLにおいて~targetにされている ~E 要素 ◎ an E element being the target of the current URL | `~target疑似類§ | 3 |
`~E:target-within^css | 現在の~URLにおいて~targetにされているか, それを包含している ~E 要素 ◎ an E element that is the target of the current URL or contains an element that does. | `~target容器~疑似類§ | 4 |
`~E:scope^css | `~scope_ps要素$に~~指定されている ~E 要素 ◎ an E element being a designated reference element | `起点要素 疑似類§ | 4 |
`時系列 疑似類§ | |||
`~E:current^css | 時系列再生の下で現在~呈示-中の ~E 要素 ◎ an E element that is currently presented in a time-dimensional canvas | `現在要素 疑似類§ | 4 |
`~E:current(~S)^css | 最も階層が深い `current$ps 要素であって, 選択子 ~S に合致する ~E 要素。 【?】 ◎ an E element that is the deepest :current element that matches selector s | `現在要素 疑似類§ | 4 |
`~E:past^css | 時系列再生の下で過去に現れた ~E 要素 ◎ an E element that is in the past in a time-dimensional canvas | `過去要素 疑似類§ | 4 |
`~E:future^css | 時系列再生の下で未来に現れる ~E 要素 ◎ an E element that is in the future in a time-dimensional canvas | `未来要素 疑似類§ | 4 |
`利用者~動作 疑似類§ | |||
`~E:active^css | 作動化された ~E 要素 ◎ an E element that is in an activated state | `作動化 疑似類§ | 1 |
`~E:hover^css | ~cursorが指している要素, またはその要素を子孫に持つ ~E 要素 ◎ an E element that is under the cursor, or that has a descendant under the cursor | `~pointer~hover疑似類§ | 2 |
`~E:focus^css | 利用者入力の~focusを得ている ~E 要素 ◎ an E element that has user input focus | `入力~focus疑似類§ | 2 |
`~E:focus-visible^css | 利用者入力の~focusを得ている ~E 要素のうち,~UAが その要素に対し ~focus環その他の指示子が描かれるべきと決定したもの ◎ an E element that has user input focus, and the UA has determined that a focus ring or other indicator should be drawn for that element | `~focus指示-先 疑似類§ | 4 |
`~E:focus-within^css | 利用者入力の~focusを得ているか, それを包含している ~E 要素 ◎ an E element that has user input focus or contains an element that has input focus. | `~focus容器~疑似類§ | 4 |
`~E:drop^css | ~dropされた~itemを場合によっては受取れる ~E 要素 — (次の 3 項も含め,)~drag操作中に限り,適用される ◎ an E element that can possibly receive a drop | `~drop先~疑似類§ | 4 |
`~E:drop(active)^css | ~dragしている~itemがその場で~dropされたとするときに,それを受取れる ~E 要素 ◎ an E element that is the current drop target for the item being dragged | `~drop先~疑似類§ | 4 |
`~E:drop(valid)^css | ~dragしている~itemを受取れる ~E 要素 ◎ an E element that could receive the item currently being dragged E:drop(invalid) | `~drop先~疑似類§ | 4 |
`~E:drop(invalid)^css | ~dragしている~itemは受取れないが 他の何らかの~itemは受取れる ~E 要素 ◎ an E element that cannot receive the item currently being dragged, but could receive some other item | `~drop先~疑似類§ | 4 |
`入力 疑似類§( “UI” は “利用者~interface” の略語 ) | |||
`~E:enabled^css `~E:disabled^css | 順に、[ 可能化-, 不能化- ]されている,型 ~E の~UI要素 ◎ a user interface element E that is enabled or disabled, respectively | `操作可否 疑似類§ | 3 |
`~E:read-only^css `~E:read-write^css | 順に、利用者が内容を[ 改めれる, 改めれない ]ような,型 ~E の~UI要素 ◎ a user interface element E that is user alterable, or not | `変更可否 疑似類§ | 3-UI/4 |
`~E:placeholder-shown^css | 現在~仮入力~textを例示している,型 ~E の入力~control ◎ an input control currently showing placeholder text | `仮入力例示 疑似類§ | 3-UI/4 |
`~E:default^css | 一連の選択肢の中で既定の選択肢にされている,型 ~E の~UI要素 ◎ a user interface element E that is the default item in a group of related choices | `既定option 疑似類§ | 3-UI/4 |
`~E:checked^css | ~checkまたは選択されている,型 ~E の~UI要素 (~radio~buttonや~checkboxなど) ◎ a user interface element E that is checked/selected (for instance a radio-button or checkbox) | `選択-済み疑似類§ | 3 |
`~E:indeterminate^css | 不定の(~checkの有無が~~未設定の)状態にある,型 ~E の~UI要素 ◎ a user interface element E that is in an indeterminate state (neither checked nor unchecked) | `不定 疑似類§ | 4 |
`~E:valid^css `~E:invalid^css | 順に、入力~値が[ 妥当である, 妥当でない ]ような,型 ~E の利用者入力~要素 ◎ a user-input element E that meets, or doesn’t, its data validity semantics | `妥当性 疑似類§ | 3-UI/4 |
`~E:in-range^css `~E:out-of-range^css | 順に、入力~値が[ 範囲~内, 範囲~外 ]にある,型 ~E の利用者入力~要素 ◎ a user-input element E whose value is in-range/out-of-range | `範囲~疑似類§ | 3-UI/4 |
`~E:required^css `~E:optional^css | 順に、入力が必須[ である, でない ],型 ~E の利用者入力~要素 ◎ a user-input element E that requires/does not require input | `必須随意 疑似類§ | 3-UI/4 |
`~E:user-invalid^css | 入力~値が不正な(妥当でない†, 範囲~外†, 必須にもかかわらず未入力),型 ~E の利用者入力~要素 【†かつ,利用者から何か入力されているような】 ◎ a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required) | `利用者~対話 疑似類§ | 3-UI/4 |
`構造上の疑似類§( 以下における “同胞” とは、 “同胞要素” の略記であり(~textなど他種の~nodeは除外される),同じ親を共有する(正確には,同じ`同胞群$に属する),`木~順序$による一連の要素を意味する)。 | |||
`~E:root^css | 文書の根である ~E 要素 ◎ an E element, root of the document | `root$PS | 3 |
`~E:empty^css | (~text~nodeも含め)子~nodeを持たない ~E 要素 ◎ an E element that has no children (not even text nodes) | `empty$PS | 3 |
`~E:blank^css | `空白$以外の内容を持たない ~E 要素 ◎ an E element that has no content except maybe white space | `blank$PS | 4 |
`~E:nth-child(~n [of ~S]?)^css | 同胞の中で ~S に合致するような ~n 個目の要素であって, ~E 要素であるもの ◎ an E element, the n-th child of its parent matching S | `nth-child()$PS | 3/4 |
`~E:nth-last-child(~n [of ~S]?)^css | 同胞の中で ~S に合致するような最後から ~n 個目の要素であって, ~E 要素であるもの ◎ an E element, the n-th child of its parent matching S, counting from the last one | `nth-last-child()$PS | 3/4 |
`~E:first-child^css | 同胞の中で最初の要素であって, ~E 要素であるもの ◎ an E element, first child of its parent | `first-child$PS | 2 |
`~E:last-child^css | 同胞の中で最後の要素であって, ~E 要素であるもの ◎ an E element, last child of its parent | `last-child$PS | 3 |
`~E:only-child^css | 自身以外に同胞は無い ~E 要素 ◎ an E element, only child of its parent | `only-child$PS | 3 |
`~E:nth-of-type(~n)^css | 同胞の中の ~E 要素のうち, ~n 個目のもの ◎ an E element, the n-th sibling of its type | `nth-of-type()$PS | 3 |
`~E:nth-last-of-type(~n)^css | 同胞の中の ~E 要素のうち,最後から ~n 個目のもの ◎ an E element, the n-th sibling of its type, counting from the last one | `nth-last-of-type()$PS | 3 |
`~E:first-of-type^css | 同胞の中の ~E 要素のうち,最初のもの ◎ an E element, first sibling of its type | `first-of-type$PS | 3 |
`~E:last-of-type^css | 同胞の中の ~E 要素のうち,最後のもの ◎ an E element, last sibling of its type | `last-of-type$PS | 3 |
`~E:only-of-type^css | 同胞である ~E 要素が自身の他にないもの ◎ an E element, only sibling of its type | `only-of-type$PS | 3 |
`結合子§( 語 “同胞” は上記参照 ) | |||
`~E ~F^css | ~E 要素の子孫である ~F 要素 ◎ an F element descendant of an E element | `子孫~結合子§ | 1 |
`~E > ~F^css | ~E 要素の子である ~F 要素 ◎ an F element child of an E element | `子~結合子§ | 2 |
`~E + ~F^css | 同胞の中で, ~E 要素の直後にある ~F 要素 ◎ an F element immediately preceded by an E element | `次同胞~結合子§ | 2 |
`~E ~ ~F^css | 同胞の中で, ~E 要素に後続している ~F 要素 ◎ an F element preceded by an E element | `後続同胞~結合子§ | 3 |
`格子構造~選択子§ | |||
`~F || ~E^css | 格子/~table内の, ~F 要素で表現される~columnに属する~cellを表現する ~E 要素 ◎ an E element that represents a cell in a grid/table belonging to a column represented by an element F | `~column結合子§ | 4 |
`~E:nth-col(~n)^css | 格子/~table内の ~n 個目の~columnに属する~cellを表現する ~E 要素 ◎ an E element that represents a cell belonging to the nth column in a grid/table | `nth-col()$PS | 4 |
`~E:nth-last-col(~n)^css | 格子/~table内の最後から ~n 個目の~columnに属する~cellを表現する ~E 要素 ◎ an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one | `nth-last-col()$PS | 4 |
注記: 一部の~Level 4 選択子(上の一覧で "3-UI" と記されているもの)は `CSS3UI$r にて導入されたものである。 ◎ Note: Some Level 4 selectors (noted above as "3-UI") were introduced in [CSS3UI].
2.1. 選択子の `~live^i vs `~snapshot^i~profile
選択子は,多種多様な処理能の文脈~下で利用される。 あいにく、一部の強力な選択子は,処理能に左右され易い文脈に含めるには 現実的に負荷が高過ぎる。 これに適応するため、~Selectors仕様には 2 種類の~profileが定義される: ◎ Selectors are used in many different contexts, with wildly varying performance characteristics. Some powerful selectors are unfortunately too slow to realistically include in the more performance-sensitive contexts. To accommodate this, two profiles of the Selectors spec are defined:
- `~live~profile@
- `~live~profile$は、~browserにおける~liveな~CSS選択子の照合も含めた,任意の文脈の下での利用に適切になるものである。 ◎ The live profile is appropriate for use in any context, including browser CSS selector matching, which is live.\
- 次のもの以外の,この文書にて定義されるすべての選択子が含まれる ⇒ `has()$ps 疑似類 ◎ It includes every selector defined in this document, except for: • The :has() pseudo-class
- `~snapshot~profile@
- `~snapshot~profile$は,処理能にあまり左右されない文脈の下で適切になる。 特に,静的な文書~木に対し選択子を評価する文脈~下で適切になる。 例えば、 `DOM$r にて定義される `querySelector()^c ~methodは,~snapshot~profileを用いるべきである。 これには,この文書に定義されるすべての選択子が含まれる。 ◎ The snapshot profile is appropriate for contexts which aren’t extremely performance sensitive; in particular, it’s appropriate for contexts which evaluate selectors against a static document tree. For example, the querySelector() method defined in [DOM] should use the snapshot profile. It includes all of the selectors defined in this document.
~Selectors~Level 4 に適合する~CSS実装は、~CSSによる選択に際しては,`~live~profile$を用い~MUST。 `~live~profile$を利用する実装は、~profileに含まれない選択子を,未知の/無効なものとして扱わ~MUST。 ◎ CSS implementations conformant to Selectors Level 4 must use the live profile for CSS selection. Implementations using the live profile must treat selectors that are not included in the profile as unknown and invalid.
“~live” / “~snapshot” ~profileへの仕分けは,実装者による考査を要する。 現時点では~live~profileに仕分けられていないものが,~CSS~Selectorsにて手頃に行えるならば、それらは移行されるべきである。 ◎ The categorization of things into the “live” or snapshot profiles needs implementor review. If some things currently not in the live profile can reasonably be done in CSS Selectors, we should move them.
3. 選択子の構文と構造
3.1. 構造と各種用語
`選択子@ ( `selector^en )は、木~構造における特定0の要素(たち)が成す~patternを表現する。 `選択子$は、[ `単体~選択子$, `合体~選択子$, `複体~選択子$, `選択子~list$ ]の総称である†。 `選択対象@ とは、当の`選択子$の対象になるもの( `to be about^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.
【† この仕様の中では、`複体~選択子$の意味で用いられることが多い。 この種の同一視は、“一定範囲の要素を選択する” という機能上の観点からは同等に扱える意味で 理に適う面もある一方で,定義などが解り難くなる面もあるので、この訳では必要に応じて注釈を加えている。 】
- `単体~選択子@( `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 により表現される)、単独の要素が同時に満たす条件の集合を表現する。 この並びに[ `型~選択子$/`全称~選択子$ ]が包含される場合、それは先頭に来~MUST。 ◎ 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.
- `結合子@( `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の関係性において同時に満たす条件 ]の集合を表現する。 ◎ A complex selector is a sequence of one or more 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 は、次をすべて満たすならば,`複体~選択子$ ~S に`合致して$いるとされる:
- ~S を成す各`合体~選択子$ごとに,それに`合致して$いる要素が存在する
- 前項を満たす要素たちの関係性は、対応する`合体~選択子$たちの合間にある`結合子$に`合致して$いる
- ~E は、 ~S の最後の`合体~選択子$に`合致して$いる
注記: したがって、単独の`合体~選択子$からなる選択子は、それを成している各 `単体~選択子$による要件すべてを満たすような,どの要素にも合致する。 選択子を成す並びに別の[ `合体~選択子$と`結合子$ ]を前置することは、要素がその選択子に合致するための,追加の拘束を課すことになる — `選択対象$が、常に,最後の`合体~選択子$により表現される要素たちの部分集合になるように。 ◎ Note: Thus, a selector consisting of a single compound selector matches any element satisfying the requirements of its constituent simple selectors. Prepending another compound selector and a combinator to a sequence imposes additional matching constraints, such that the subjects of a complex selector are always a subset of the elements represented by its last compound selector.
[ `単体~選択子$/`合体~選択子$/`複体~選択子$ ] `の~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.
【 これらの語は,上述の様に階層的な関係で区別されるものであるが、(構文上は/機能的には)同時に: (1) `型~選択子$や`全称~選択子$は, 1 個の`単体~選択子$からなる`合体~選択子$と見なすこともでき, (2) `合体~選択子$は, 1 個のそれからなる`複体~選択子$と見なすこともでき, (3) `複体~選択子$は, 1 個のそれからなる`選択子~list$と見なすこともできる。 その結果, 1 個の`単体~選択子$は,`選択子~list$と見なせることになり、`合体~選択子$の一部分はまた `合体~選択子$と見なすことことができ,`複体~選択子$の一部分はまた `複体~選択子$と見なすこともできる, 等々になる。 したがって,例えば、複体~選択子に適用される~algoや要件は,型~選択子などの単体~選択子や合体~選択子,等々にも(それを複体~選択子と見なす下で)適用されることになる。 】
ここで取扱われていない疑似要素も,取扱われるべきある。 ◎ Pseudo-elements aren’t handled here, and should be.
3.2. ~data~model
選択子は、~DOM木 `DOM$r などの要素~木に対し評価される。 この仕様においては、“文書~木”, あるいは “~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.
- 要素が属する~class(名前を持つ~group)たち ◎ Classes (named groups) to which it belongs.
- [ 名前, 値 ]の対である,属性 ◎ Attributes, which are name-value pairs.
個々の要素には、上に挙げた特能のうち一部を欠くものもある中で,どの特能も備えない `無特能@ のものもある。 `無特能$の要素は、どの選択子にも合致しない — 明示的に合致するとされるものを除いて。 `無特能$の要素に合致するような選択子は、既定の名前空間 `CSS3NAMESPACE$r も無視して合致し~MUST ◎ While individual elements may lack any of the above features, some elements are featureless. A featureless element does not match any selector at all, except those it is explicitly defined to match. If a given selector is allowed to match a featureless element, it must do so while ignoring the default namespace. [CSS3NAMESPACE]
例えば,`~shadow木$の中の`~shadow~host$は、`無特能$であり, `host$ps および `host-context()$ps を除く どの `疑似類$にも合致しない。 ◎ For example, the shadow host in a shadow tree is featureless, and can’t be matched by any pseudo-class except for :host and :host-context().)
選択子の多くは、 `文書~言語@ (すなわち,文書~木の言語と意味論)の意味論に依存したり, `~host言語@ (すなわち,選択子 構文を利用している言語)の意味論に依存する。 例えば、 `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の部分木, あるいは文書の一片†に絞る, `視野付き選択子@ ( `scoped selector^en )を採用することがある。 この部分木の根は `視野根@ ( `scoping root^en )と呼ばれる††。 それは、“真の” 要素( `視野要素@ ( `scoping element^en )と呼ばれる)であるか, `~virtual@ のもの( `DocumentFragment$I など)†††いずれかになる。 ◎ 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, and may be either a true element (the scoping element) or a virtual one (such as a DocumentFragment).
【† `Document^I ~nodeの部分木でないもの(†††)も含め,根が `root$ps に合致しない要素~木 】【†† すなわち,対象の範囲を見渡す “視点” 】
`視野付き$にされた選択子は、その`視野根$の子孫である要素のみに合致する。 (選択子の残りの部分に対する照合には制約はない — 視野に入る必要があるのは、`選択対象$になる要素に限られる。)† ◎ 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.)
【† すなわち、視野付きでない下で合致した要素たちを,`視野根$の子孫のみを残すように絞込む。 】
例えば, `DOM$r にて定義される要素~上の `querySelector()$c 関数では、作者は,選択子を,その要素による`視野付き$にする下で評価できる。 ◎ For example, the element.querySelector() function defined in [DOM] allows the author to evaluate a scoped selector relative to the element it’s called on.
`widget.querySelector("a")^c の様な~callは、 `widget^e 要素の内側にある `a^e 要素のみを見出すことになる — 文書~内に散らばっている他の `a^e 要素は無視して。 ◎ A call like widget.querySelector("a") will thus only find a elements inside of the widget element, ignoring any other as that might be scattered throughout the document.
注記: 文脈において,選択子に対し`~scope_ps要素$が明示的に定義されていない場合、`視野根$が`~scope_ps要素$になる。 ◎ Note: If the context does not explicitly define any :scope elements for the selector, the scoping root is the :scope element.
3.4. 相対~選択子
ある種の文脈~下では `相対~選択子@ が受容される。 それは、ある `~scope_ps要素$(すなわち, `scope$ps に合致する要素)に相対的な要素を表現する選択子~用の,一種の省略形である。 `相対~選択子$においては、 `scope$ps 疑似類がすでに伴われているものを除く,それぞれの`複体~選択子$の先頭に、暗黙的に "`:scope ^css" ( `scope$ps 疑似類と~space(子孫~結合子)の並び)が在るものとみなされる。 これにより、選択子の構文は`結合子$( `combinator$prod 生成規則)から開始できるようになる。 ただし,`相対~選択子$は、その照合の前に `絶対化$され~MUST。 ◎ Certain contexts may accept relative selectors, which are a shorthand for selectors that represent elements relative to a :scope element (i.e. an element that matches :scope). In a relative selector, “:scope ” (the :scope pseudo-class followed by a space) is implied at the beginning of each complex selector that does not already contain the :scope pseudo-class. This allows the selector to begin syntactically with a combinator. However, it must be absolutized before matching.
【 すなわち,“相対” は、`構造と各種用語§ 節にて定義される各種~選択子の階層~関係とは関係ない,並立する概念であり、従来の選択子を拡張するものである。 したがって、次節の`絶対化$は,従来の選択子も受容し、相対~選択子を受容する文脈は,従来の選択子も受容し得る。 例えば,相対~選択子を引数にとる `has()$ps は、その節の例に示されている様に,実際には従来の選択子も受容する。 】
絶対化された`相対~選択子$は、追加で`視野付き$にもなり得る。 ◎ Relative selectors, once absolutized, can additionally be scoped.
`相対~選択子$は、`文法§においては `relative-selector$t により表現される。 ◎ Relative selectors are represented by <relative-selector> in the selectors grammar.
3.4.1. 相対~選択子の絶対化
【複体~選択子としての】 `相対~選択子$ ~S の `絶対化@ は、次で与えられる: ◎ To absolutize a relative selector:
-
~IF[ `~scope_ps要素$は不在 ]~AND[ ~S は `~virtual$視野根により`視野付き$にされている ]: ◎ If there are no :scope elements and the selector is scoped to a virtual scoping root:
これには健全な定義が必要である。 ◎ This needs a sane definition.
-
~ELSE: ◎ Otherwise:
- ~IF[ ~S は[ 空白~形による`子孫~結合子$ ]でない`結合子$から開始されている ] ⇒ ~RET ~S の先頭に`合体~選択子$として `scope$ps を挿入した結果 ◎ If the selector starts with a combinator other than the white space form of the descendant combinator, prepend :scope as the initial compound selector.
- ~IF[ ~S の[ ~top-level, または`関数形~疑似類$における 1 個の引数 ]において,【その先頭に】 `scope$ps 疑似類は与えられていない ] ⇒ ~RET ~S の先頭に[ `scope$ps , [ 空白~形による`子孫~結合子$ ]]並びを挿入した結果 ◎ Otherwise, if the selector does not contain any instance of the :scope pseudo-class (either at the top-level or as an argument to a functional pseudo-class), prepend :scope followed by the white space form of the descendant combinator.
- ~RET ~S (すでに絶対的である。) ◎ Otherwise, the selector is already absolute.
【 実際には、上に述べた様に`絶対化$は,従来の選択子も受容する — 既定の `~scope_ps要素$(文書の根~要素)の下では,実質的に恒等変換として働く。 】
`相対~選択子の~listを絶対化する@ ときは、所与の`選択子~list$に対し,それを成す各 `相対~選択子$を絶対化する。 ◎ To absolutize a relative selector list, absolutize each relative selector in the list.
3.5. 疑似類
`疑似類@ は、文書~木の外側にある情報に基づく選択を, あるいは 他の`単体~選択子$を用いて表すには不便または不可能な選択を可能にするような,`単体~選択子$である。 疑似類は、文書~自身は変化しなくとも,[ 利用者が文書と対話する間に,要素は疑似類を獲得したり, 失ったりし得る ]点で動的でもある。 `疑似類$は、[ 文書~source/文書~木に現れたり,それを改変する ]ことはない。 ◎ 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.
`疑似類$の構文は、次の並びで与えられる:
- ~colon( `003A^U )
- `識別子$である,`疑似類$の名前
- `関数形~疑似類@ である場合に限り ⇒ 丸括弧で括られた 0 個以上の引数
例えば、 `valid$ps は定例の疑似類であり, `lang()$ps は`関数形~疑似類$である。 【 `drop$ps, `drop()$ps のように、同じ名前に対し,関数形とそうでない 2 種類がある場合もある。】 ◎ 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.
`疑似類$は、他の`単体~選択子$と同様に,選択子に包含されるすべての`合体~選択子$において許容されるが、`型~選択子$, または`全称~選択子$(もし在れば)に後続し~MUST。 ◎ 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. 疑似要素
ある種の`疑似類$が,文書~木に直に現れない追加の状態~情報を表現するのと同様に、 `疑似要素@ は,文書~木に直に現れないような 要素 を表現する。 それらは、文書~言語が供するものを超えるような,文書~木についての抽象化を創出するために利用される。 例えば、疑似要素を,文書~言語の要素に対応しないような文書の部位(要素~境界と揃わない範囲や,その木~構造に収まらないものも含む)を選択するために利用できる — 例えば、[ 文書~木に含まれない内容や, 文書~木を別形へ投影した内容 ]を表現したり,[ ~style付け / ~layout / 利用者との対話 / その他,文書~木に反映されないような処理 ]により供される情報に依拠する。 ◎ 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.
【 “疑似要素” という語は、この種の抽象的な要素をそのまま指すこともあれば,そのような要素を選択する選択子を指すこともある。 後者は、実際には, “疑似要素~選択子” の略称と考えられる。 】
例えば、文書~言語は,要素~内容の 初行の初字に~accessする仕組みを提供しないが、それらにも~styleをあてがえるようにする`疑似要素$はある( `first-letter$pe, `first-line$pe )。 とりわけ, `first-line$pe の事例では、疑似要素が内容のどの部位を表現するかは,文書~木からは推定できない~layout情報に依存することに注意。 ◎ For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content, but there exist pseudo-elements (::first-letter and ::first-line) that allow those things to be styled. Notice especially that in the case of ::first-line, which portion of content is represented by the pseudo-element depends on layout information that cannot be inferred from the document tree.
`疑似要素$は、任意の要素の前後に追加の内容を挿入する `before$pe, `after$pe 疑似要素など,文書に元から存在しないような内容も表現し得る。 ◎ Pseudo-elements can also represent content that doesn’t exist in the source document at all, such as the ::before and ::after pseudo-elements which allow additional content to be inserted before or after the contents of any element.
`疑似類$と同様、`疑似要素$も,[ 文書~source/文書~木 ]内には現れず, それを改変することもない。 したがって疑似要素は、`構造上の疑似類$の解釈にも, [[ 疑似要素の`出自の要素$や, その木 ]に該当するような,他の選択子 ]の解釈にも影響しない。 ◎ 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に存在する疑似要素は、[ `CSS21$r ( ~Level 2 ), `SELECT$r ( ~Level 3 ), `CSS-PSEUDO-4$r ( ~Level 4 ) ]にて定義される。 ◎ 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.6.1. 構文
`疑似要素$の構文は、次の並びで与えられる:
- "`::^css" ( 2 個の `003A^U 並び)
- `識別子$である,`疑似要素$の名前
`疑似要素$の名前は、`~ASCII大小無視$である。 2 個の~colonの間や, ~colonと`疑似要素$の名前の間には、`空白$は許容されない。
◎ The syntax of a pseudo-element is "::" (two U+003A COLON characters) followed by the name of the pseudo-element as an identifier. Pseudo-element names are ASCII case-insensitive. No white space is allowed between the two colons, or between the colons and the name.~CSS~Level 1 / ~CSS~Level 2 では、疑似要素と疑似類は,ともに 単独の~colonによる構文で一緒くたにされていたので、~UAは,以前の~Level 1 / 2 による疑似要素( `before$pe, `after$pe, `first-line$pe, `first-letter$pe )に対しては,~colon 1 個による記法も受容し~MUST。 この,互換性のための記法は、他の疑似要素には許容されない。 この構文は非推奨にされたので、作者は,これらの疑似要素にも~Level 3 以上の二重~colon構文を利用するべきである。 ◎ Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 & 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.
`疑似要素$は `無特能$であり、他のどの選択子にも合致し得ない。 ◎ Pseudo-elements are featureless, and so can’t be matched by any other selector.
3.6.2. 文書~木への束縛-法
`疑似要素$は,木~内に独立して存在することはない — それは常に、その `出自の要素@ と呼ばれる,頁~上の別の要素に束縛される。 構文上は、`疑似要素$は,その`出自の要素$を表現している`合体~選択子$の直後に続く。 この`合体~選択子$が省略された場合、それは,`全称~選択子$ `*^S であるものと見做される。 ◎ Pseudo-elements do not exist independently in the tree: they are always bound to another element on the page, called their originating element. Syntactically, a pseudo-element immediately follows the compound selector representing its originating element. If this compound selector is omitted, it is assumed to be the universal selector *.
例えば、選択子 `div a::before^S において,頭部の選択子に合致する `a^e 要素は、~~付随する `before$pe 疑似要素に対する`出自の要素$になる。 ◎ For example, in the selector div a::before, the a elements matched by the selector are the originating elements for the ::before pseudo-elements attached to them.
選択子 `::first-line^S は,`*::first-line^S に等価であり、文書~内の各 要素ごとに,その `first-line$pe 疑似要素を選択する。 ◎ The selector ::first-line is equivalent to *::first-line, which selects the ::first-line pseudo-element on every element in the document.
`疑似要素$ ~S を含んでいる選択子においては、選択子の中の ~S より前の部分が, ~S 用の`出自の要素$を選択し、 ~S より後の部分があるならば,それは ~S 自身に適用される(次節を見よ)。 ◎ When a pseudo-element is encountered in a selector, the part of the selector before the pseudo-element selects the originating element for the pseudo-element; the part of the selector after it, if any, applies to the pseudo-element itself. (See below.)
3.6.3. 疑似要素に対する疑似類による絞り込み
`疑似要素$には、その直後に `利用者~動作 疑似類§の任意の組合せが続いていてもよい — その事例では、`疑似要素$は,それらの疑似類に対応する状態にあるときにのみ,表現される。 これらの疑似類が その`疑似要素$上でも合致し得るかどうかは、当の `疑似類$と`疑似要素$ の定義に依存する — 他から指定されない限り,これらの`疑似類$は,`疑似要素$上で合致することはない。 ◎ A pseudo-element may be immediately followed by any combination of the user action pseudo-classes, in which case the pseudo-element is represented only when it is in the corresponding state. Whether these pseudo-classes can match on the pseudo-element depends on the pseudo-class and pseudo-element’s definitions: unless otherwise-specified, none of these pseudo-classes will match on the pseudo-element.
上に示した疑似類を包含しているときも `not()$ps, `matches()$ps を利用できるのかどうか,明確化する。 ◎ Clarify that :not() and :matches() can be used when containing above-mentioned pseudos.
例えば, `hover$ps 疑似類は どの`疑似要素$にも適用し得るものと指定されているので、 `::first-line:hover^S は,初行~上に~hoverされたときに合致することになる。 一方で,[ `focus$ps, `first-line$pe ]は いずれも[ `first-line$pe に `focus$ps を適用し得る ]ものと定義されてはいないので、選択子 `::first-line:focus^S に合致するものは,決してないことになる。 ◎ For example, since the :hover pseudo-class specifies that it can apply to any pseudo-element, ::first-line:hover will match when the first line is hovered. However, since neither :focus nor ::first-line define that :focus can apply to ::first-line, the selector ::first-line:focus will never match anything.
`::first-line:not(:focus)^S は,何にでも合致するのか? ◎ Does ::first-line:not(:focus) match anything?
`::first-line:hover^S と `:hover::first-line^S とは、かなり異なることに注意。 後者は、~hoverされた どの`出自の要素$に対しても,その初行に合致する。 例えば, `:hover::first-line^S は、段落の 2 行目に~hoverされたときでも,段落の初行に合致する。 一方で, `::first-line:hover^S が合致するのは、初行に~hoverされたときに限られる。 ◎ Notice that ::first-line:hover is very different from :hover::first-line, which matches the first line of any originating element that is hovered! For example, :hover::first-line also matches the first line of a paragraph when the second line of the paragraph is hovered, whereas ::first-line:hover only matches if the first line itself is hovered.
注記: 将来の仕様から指定されない限り, `利用者~動作 疑似類§ 以外の疑似類は、疑似要素と~~複合されたときには,有効でなくなるので、例えば `::before:first-child^S は,`無効な選択子$になる。 ◎ Note: Note that, unless otherwise specified in a future specification, pseudo-classes other than the user action pseudo-classes are not valid when compounded to a pseudo-element; so, for example, ::before:first-child is an invalid selector.
3.6.4. 内部~構造
一部の`疑似要素$は、内部~構造を持つものと定義されている。 その種の`疑似要素$には,その関係性を表すために[ `子~結合子$/`子孫~結合子$ ]が後続していてもよい。 他の疑似要素については、`結合子$が後続するものは `無効な選択子$になる。 ◎ Some pseudo-elements are defined to have internal structure. These pseudo-elements may be followed by child/descendant combinators to express those relationships. Selectors containing combinators after the pseudo-element are otherwise invalid.
例えば,[ `::first-letter + span^S / `::first-letter em^S ]は、無効な選択子になる。 しかしながら, `::shadow > p^S は、選択子として有効になる — `shadow$pe は内部~構造を持つものと定義されているので。 ◎ For example, ::first-letter + span and ::first-letter em are invalid selectors. However, since ::shadow is defined to have internal structure, ::shadow > p is a valid selector.
注記: 既存の疑似要素の能力は,将来の仕様により拡張0されることもあるので、現在は無効でも(例 `::first-line :any-link^S ),未来には有効になり得る。 ◎ Note: A future specification may expand the capabilities of existing pseudo-elements, so some of these currently-invalid selectors (e.g. ::first-line :any-link) may become valid in the future.
そのような`疑似要素$の子たちは,同時に他の要素の子にもなり得る。 しかしながら、少なくとも~CSSにおける それらの具現化は,`~box木$の木~構造たる部分は保守される様に定義され~MUST。 ◎ The children of such pseudo-elements can simultaneously be children of other elements, too. However, at least in CSS, their rendering must be defined so as to maintain the tree-ness of the box tree.
例えば, `content$pe 疑似要素†は、そこへ distributeされる要素をその一連の子として扱う。 【† `slotted()$pe に改称された。】 すなわち、次の~code片が与えられたとするとき: ◎ For example, the ::content pseudo-element treats elements distributed to it as its children. This means that, given the following fragment:
<div> <span>foo</span> <"shadow root"> <content></content> </"shadow root"> </div>
次の 2 つの選択子は、同じ要素を,異なる~pathを介して選択する ⇒# `div > span^S, `div::shadow ::content > span^S ◎ the selectors div > span and div::shadow ::content > span select the same element via different paths.
しかしながら、具現化-時には,`~box木$の木~構造が保守されるように、 `span^e 要素は, `div^e 要素ではなく `content^e 要素の子であったかの様に,~boxを生成する。 ◎ However, when rendered, the <span> element generates boxes as if it were the child of the <content> element, rather than the <div> element, so the tree structure of the box tree is maintained.
3.7. 文字大小区別
すべての~Selectors構文は、その制御~下にない部分を除いて,~ASCII範囲の中で文字大小は区別されない(すなわち, "a" 〜 "z" と "A" 〜 "Z" は対応する文字が同一視される) — 特定的には、文書~言語の[ 要素~名/属性~名/属性~値 ]における文字大小区別は,文書~言語に依存する。 ◎ All Selectors syntax is case-insensitive within the ASCII range (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.
例えば~HTMLの下では,要素~名と属性~名は ~ASCII大小無視 であるが、~XMLの下では,文字大小は区別される。 ◎ For example, in HTML, element and attribute names are ASCII case-insensitive, but in XML, they are case-sensitive.
名前空間 接頭辞の文字大小区別については `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における `空白@ は、次に挙げる符号位置のみからなる ⇒# `0020^U0 SPACE, `0009^U0 TAB, `000A^U0 LINE FEED , `000D^U0 CARRIAGE RETURN, `000C^U0 FORM FEED
空白に似た他の符号位置 — 例えば `2003^U0 EM SPACE や `3000^U0 IDEOGRAPHIC SPACE — は、構文上の`空白$を成すものとは,決して見なされない。
◎ White space in Selectors consists of the code points SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), CARRIAGE RETURN (U+000D), and FORM FEED (U+000C). Other space-like code points, such as EM SPACE (U+2003) and IDEOGRAPHIC SPACE (U+3000), are never considered syntactic white space.~Selectorsにおける符号位置は、 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
規則 `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 @namespacerule. [CSS3NAMESPACE]
3.9. 無効な選択子と~errorの取扱い
次に挙げるものは `無効な選択子@ ( “妥当でない” 選択子)とされる — ~UA は、その取扱い規則に従わ~MUST: ◎ User agents must observe the rules for handling invalid selectors:
- 選択子の構文解析-時に~errorになるもの — 例えば,認識されない~tokenや, 構文解析のある地点にて許容されない~tokenを含むもの(`文法§を見よ)。 ◎ a parsing error in a selector, e.g. an unrecognized token or a token which is not allowed at the current parsing point (see §17 Grammar), 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しない[ 疑似類/疑似要素/結合子/その他の構文上の構成子 ]を`無効な選択子$として扱わ~MUST。 部分的な実装 を見よ。 ◎ 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.
4. 論理的な組合せ
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 )” は,~Selectors~Level 3 までの “選択子の~group ( `groups of selectors^en )” に該当する(順序を含意する “~list” に改称されたのは、CSSOM などの仕様にて選択子の処理~model(直列化)を規定する際に,この名称の方が適切なためと見られる)。 】
宣言が互いに一致する 3 つの規則を一つにまとめることを~~考える: ◎ CSS example: In this example, we condense three rules with identical declarations into one. Thus,
h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }
これは、次と等価になる: ◎ is equivalent to:
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.
無効な~CSSの例: ◎ Invalid CSS example:
h1 { font-family: sans-serif } h2..foo { font-family: sans-serif } h3 { font-family: sans-serif }
は、次と等価ではない: ◎ is not equivalent to:
h1, h2..foo, h3 { font-family: sans-serif }
上の選択子( `h1, h2..foo, h3^S )は全体として無効であり,~style規則~全体が取り除かれるので。 (選択子が~group化されていなければ、 `h2..foo^css 用の規則のみが取り除かれる。) ◎ because the above selector (h1, h2..foo, h3) is entirely invalid and the entire style rule is dropped. (When the selectors are not grouped, only the rule for h2..foo is dropped.)
4.2. 論理和 疑似類: `matches()^ps
論理和( `matches-any^en ) 疑似類 `matches()@ps は、`選択子~list$を引数にとる`関数形~疑似類$である。 それは、その引数で表現される要素を表現する。 ◎ The matches-any pseudo-class, :matches(), is a functional pseudo-class taking a selector list as its argument. It represents an element that is represented by its argument.
注記: `matches()$ps 疑似類の詳細度は、その引数の詳細度に置換される。 したがって, `matches()$ps で書かれた選択子の詳細度は、 `matches()$ps を外したときと等価になる。 例えば,次の 2 つは、[ 照合の挙動, 詳細度 ]の両者において等価になる:
- `:matches(ul, ol, .list) > [hidden]^S
- `ul > [hidden], ol > [hidden], .list > [hidden]^S
`選択子の詳細度の計算-法§を見よ。 課題 1027 も見よ。
◎ Note: The specificity of the :matches() pseudo-class is replaced by the specificity of its argument. Thus, a selector written with :matches() has equivalent specificity to the equivalent selector written without :matches(). For example, :matches(ul, ol, .list) > [hidden] and ul > [hidden], ol > [hidden], .list > [hidden] are equivalent in both their matching behavior and specificity. See §16 Calculating a selector’s specificity. ISSUE: See also issue 1027.疑似要素は,論理和 疑似類では表現し得ない — それらは `matches()$ps の中では妥当でない。 ◎ Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :matches().
既定の名前空間~宣言は、 `matches()$ps 疑似類【の引数】の中のどの選択子に対しても,その`選択対象$を表現している`合体~選択子$には — それが、明示的に[ `全称~選択子$ / `型~選択子$ ]を包含している場合を除き — 影響しない。 ◎ Default namespace declarations do not affect the compound selector representing the subject of any selector within a :matches() pseudo-class, unless that compound selector contains an explicit universal selector or type selector.
この,明示的な`全称~選択子$用の例外は、何故? ◎ Why this exception for the explicit universal selector?
次の選択子は、名前空間を問わず, ~hover/~focus された任意の要素に合致する。 したがって その照合は、既定の名前空間に属する要素のみに制限されない。 ◎ For example, the following selector matches any element that is being hovered or focused, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are being hovered or focused.
*|*:matches(:hover, :focus)
一方で次の選択子は、~hover/~focusされた要素のうち,既定の名前空間に属するもののみを表現する【既定の名前空間は宣言-済みとする】。 `matches()$ps 記法の中で明示的に`全称~選択子$が用いられているので: ◎ The following selector, however, represents only hovered or focused elements that are in the default namespace, because it uses an explicit universal selector within the :matches() notation:
*|*:matches(*:hover, *:focus)
4.3. 否定~疑似類: `not()^ps
否定~疑似類 `not()@ps は、`選択子~list$を引数にとる`関数形~疑似類$である。 それは,その引数で表現されない要素を表現する。 ◎ The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument. It represents an element that is not represented by its argument.
注記: ~Selectors~Level 3 においては、単独の`単体~選択子$のみが `not()$ps の引数に許容されていた。 ◎ Note: In Selectors Level 3, only a single simple selector was allowed as the argument to :not().
注記: `not()$ps 疑似類の詳細度は、その引数~内の合致した選択子の詳細度のうち,最高のそれに置換される — したがって,その挙動は、 `:not(:matches(引数))^S と正確に同じになる。 `選択子の詳細度の計算-法§を見よ。 ◎ 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(:matches(argument)). See §16 Calculating a selector’s specificity.
`疑似要素$は否定~疑似類では表現し得ない — それらは `not()$ps の中では妥当でない。 ◎ Pseudo-elements cannot be represented by the negation pseudo-class; they are not valid within :not().
次の選択子は、~HTML文書の中で不能化されていないすべての `button$e 要素に合致する。 ◎ For example, the following selector matches all button elements in an HTML document that are not disabled.
button:not([DISABLED])
次の選択子は、 `FOO^e 要素~以外のすべてを表現する: ◎ The following selector represents all but FOO elements.
*:not(FOO)
次の`合体~選択子$は、 ~link以外のすべての~HTML要素【 ~HTML名前空間に属する要素】を表現する。 ◎ The following compound selector represents all HTML elements except links.
html|*:not(:link):not(:visited)
`matches()$ps に対するときと同様に,既定の名前空間~宣言は、 `not()$ps 疑似類の中のどの選択子に対しても,その`選択対象$を表現している`合体~選択子$には — それが、明示的に[ `全称~選択子$ / `型~選択子$ ]を包含している場合を除き — 影響しない( `matches()$ps の例を見よ)。 ◎ As with :matches(), 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 :matches() for examples.)
注記: `not()$ps 疑似類を用いれば “無用な” 選択子も書ける。 例えば `:not(*|*)^S は、どの要素も表現しない。 あるいは `div:not(span)^S は、`詳細度$がより高くなることを除いて, `div^S と等価になる。 ◎ 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. 詳細度~調整 疑似類: `something()^ps
詳細度~調整 疑似類 `something()@ps は、 `matches()$ps と同じ構文と機能性を備える,関数形~疑似類である。 `matches()$ps と違って、 `something()$ps 疑似類も, その引数も,選択子の`詳細度$には寄与しない — その`詳細度$は、常に 0 になる。 ◎ The Specificity-adjustment pseudo-class, :something(), is a functional pseudo-class with the same syntax and functionality as :matches(). Unlike :matches(), neither the :something 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.
この疑似類には、名前が要る。 これまでの論点, open 課題 を見よ。 ◎ This pseudo-class needs a name. See previous discussion, open issue.
経験的な詳細度が作者の期待に沿わないような,共通的な例: ◎ Below is a common example where the specificity heuristic fails to match author expectations:
a:not(:hover) {
text-decoration: none;
}
nav a {
/*
効果なし
◎
Has no effect
*/
text-decoration: underline;
}
しかしながら, `something()$ps を用いれば、作者は自身の意図を明示的に宣言できる: ◎ However, by using :something() the author can explicitly declare their intent:
a:something(: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 は、`相対~選択子$による`選択子~list$を引数にとる`関数形~疑似類$である。 それは、次を満たす 要素 ~E を表現する ⇒ 選択子~listの中のいずれかの`相対~選択子$ ~S について、[ ~E を`~scope_ps要素$とする下で, ~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, when absolutized and evaluated with the element as the :scope elements, would match at least one element.
例えば,次の選択子は、 `a^e 要素のうち, `img^e を子に持つものに限り合致する: ◎ For example, the following selector matches only <a> elements that contain an <img> child:
a:has(> img)
次の選択子は、 `dt^e 要素のうち,直後に別の `dt^e 要素があるものに合致する: ◎ The following selector matches a <dt> element immediately followed by another <dt> element:
dt:has(+ dt)
次の選択子は、 `section^e 要素のうち,~~見出し要素を包含しないものに合致する: ◎ The following selector matches <section> elements that don’t contain any heading elements:
section:not(:has(h1, h2, h3, h4, h5, h6))
上の選択子における順序は重要であることに注意。 2 つの疑似類の入子を次の様に入れ替えた場合: ◎ Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:
section:has(:not(h1, h2, h3, h4, h5, h6))
~~見出し要素でない何らかの要素を包含するような,どの `section^e 要素にも合致することになる。 ◎ ...would result matching any <section> element which contains anything that’s not a heading element.
5. 基本的な選択子
5.1. 型(~tag名)選択子
`型~選択子@ は、文書~言語の要素~型の名前であり,文書~木における その要素~型の~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^S は、文書~内の `h1^e 要素を表現する。 ◎ For example, the selector h1 represents an h1 element in the document.
`型~選択子$は、`~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. 全称~選択子
`全称~選択子@ は、特別な`型~選択子$であり,どの要素~型の要素も表現する。 ◎ 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 は、 (名前空間は脇に置くなら) “ある要素~型 ~E に置き換えたとき合致するならば,合致する” ことを表す。 】
- `*[hreflang|=en]^S と `[hreflang|=en]^S は等価。 ◎ *[hreflang|=en] and [hreflang|=en] are equivalent,
- `*.warning^S と `.warning^S は等価。 ◎ *.warning and .warning are equivalent,
- `*#myid^S と `#myid^S は等価。 ◎ *#myid and #myid are equivalent.
`全称~選択子$は,他の`型~選択子$と同じ構文~規則に従う: `合体~選択子$においては、それは,高々 1 回まで, かつ最初の`単体~選択子$として現れ~MUST。 ◎ 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^S は `div:first-child^S に見誤り易い。 `div *:first-child^S の方が違いが明白になる。 ◎ 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
- 名前空間 %ns に属するような,名前 ~E の要素 ◎ elements with name E in namespace ns
- `*|~E^css
- どの名前空間にも属さないものも含め, 任意の名前空間に属するような,名前 ~E の要素 ◎ elements with name E in any namespace, including those without a namespace
- `|~E^css
- どの名前空間にも属さない,名前 ~E の要素 ◎ elements with name E without a namespace
- `~E^css
-
`既定の名前空間$が`宣言-$されていない場合、これは `*|~E^css に等価になる。
他の場合、%ns を既定の名前空間とするときの
%ns|~E
に等価になる。 ◎ 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.
次の~CSSにおいて: ◎ CSS examples:
@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 */
規則 1 は、名前空間 `http://www.example.com^l に属する `h1^e 要素のみに合致することになる。 ◎ The first rule (not counting the @namespace at-rule) will match only h1 elements in the "http://www.example.com" namespace.
規則 2 は、名前空間 `http://www.example.com^l に属する どの要素にも合致することになる。 ◎ The second rule will match all elements in the "http://www.example.com" namespace.
規則 3 は、どの名前空間にも属さない `h1^e 要素のみに合致することになる。 ◎ The third rule will match only h1 elements with no namespace.
規則 4 は、名前空間を問わず(属さないものも含め),どの `h1^e 要素にも合致することになる。 ◎ The fourth rule will match h1 elements in any namespace (including those without any namespace).
規則 5 は、既定の名前空間が定義されていないので,規則 4 に等価になる。 ◎ The last rule is equivalent to the fourth rule because no default namespace has been defined.
`型~選択子$を含まない`合体~選択子$は、`既定の名前空間$が宣言されている下では,依然として 既定の名前空間に属する要素のみに合致する。 ◎ If a default namespace is declared, compound selectors without type selectors in them still only match elements in that default namespace.
例えば,次の~stylesheetに対しては: ◎ For example, in the following style sheet:
@namespace url("http://example.com/foo"); .special { ... }
選択子 `.special^S は、(~DOMにおいては名前空間と対にされる)型~名への参照が現れていないが,名前空間 `http://example.com/foo^l に属する要素にのみ合致する。 ◎ The .special selector only matches elements in the "http://example.com/foo" namespace, even though no reference to the type name (which is paired with the namespace in the DOM) appeared.
`未宣言$の名前空間 接頭辞を伴うような[ `型~選択子$/`全称~選択子$ ]は、`無効な選択子$である。 ◎ A type selector or universal selector containing a namespace prefix that has not been previously declared is an invalid selector.
6. 属性~選択子
~Selectorsでは,要素の属性の表現も許容される。 選択子が要素に対し合致する式として用いられるとき、 `属性~選択子@ は,[ その要素がその属性~選択子で表現される属性に合致する属性を有するとき,その要素に合致する ]ものと見なされ~MUST。 ◎ Selectors allow the representation of an element’s attributes. When a selector is used as an expression to match against an element, an attribute selector must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector.
複数個の値の照合 用に,~comma区切りの構文を追加するか? — 例えば: `[rel ~=next, prev, up, first, last]^S ◎ Add comma-separated syntax for multiple-value matching? e.g. [rel ~= next, prev, up, first, last]
6.1. 属性~存在0/属性~値 選択子
CSS2 では 4 種の`属性~選択子$が導入されている: ◎ CSS2 introduced four attribute selectors:
[`att^a]
- `att^a 属性【名前が `att^l である属性】を有するような要素を表現する。 属性の値は問わない。 ◎ Represents an element with the att attribute, whatever the value of the attribute.
[`att^a=%val]
- [ `att^a 属性を有していて, その値は %val 【が表現する文字列】に一致する ]ような要素を表現する。 ◎ Represents an element with the att attribute whose value is exactly "val".
[`att^a~=%val]
- [ `att^a 属性を有していて, その値を`空白$で区切って得られる単語~listのいずれかの単語に %val が一致する ]ような要素を表現する。 %val に`空白$が含まれている場合、何も表現しないことになる(単語は`空白$で区切られるので)。 また、 %val が空~文字列の場合も,何も表現しないことになる。 ◎ Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "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^a|=%val]
- [ `att^a 属性を有していて, その値は[ %val に一致するか, または[ %val, `002D^U ]並びで始まる ]]ような要素を表現する。 これは主に BCP 47 ( `BCP47$r ) またはその後継版の言語~subcodeと照合する用途が意図されている(例えば~HTMLの `a$e 要素の `hreflang^a 属性)。 `lang^a 属性(または `xml:lang^a 属性)用の言語~subcode照合については `lang()$ps を見よ。 【~subcode — いわゆる下位tag( `subtag^en )?あるいはそれに同等/代わるもの?】 ◎ Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). 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 として与えられ~MUST。 `CSS3SYN$r 【~CSS識別子(前者)の条件を満たさない~~一般の文字列は、引用符で括る(後者)必要がある。】 ◎ Attribute values must be <ident-token>s or <string-token>s. [CSS3SYN]
次の`属性~選択子$は、 `title^a 属性を有する `h1^e 要素を表現する。 属性の値は問わない: ◎ The following attribute selector represents an h1 element that carries the title attribute, whatever its value:
h1[`title^a]
次の選択子は、 `class^a 属性の値が `example^l に一致する `span^e 要素を表現する: ◎ In the following example, the selector represents a span element whose class attribute has exactly the value "example":
span[`class^a="example"]
複数の`属性~選択子$を用いれば、要素の複数の属性, あるいは同じ属性に対する複数の条件を表現できる。 次の選択子は、 `hello^a 属性~値が `Cleveland^l に一致し, かつ `goodbye^a 属性~値が `Columbus^l に一致するような, `span^e 要素を表現する: ◎ Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute. Here, the selector represents a span element whose hello attribute has exactly the value "Cleveland" and whose goodbye attribute has exactly the value "Columbus":
span[`hello^a="Cleveland"][`goodbye^a="Columbus"]
次の~CSS規則は, "`=^css" と "`~=^css" の相違を示すものになる: 最初の選択子は、例えば `rel^a 属性の値が `copyright copyleft copyeditor^l である `a^e 要素にも合致することになる。 2 個目の選択子は、 `href^a 属性の値が `http://www.w3.org/^l に一致する `a^e 要素のみに合致することになる。 ◎ The following CSS rules illustrate the differences between "=" and "~=". The first selector would match, for example, an a element with the value "copyright copyleft copyeditor" on a rel attribute. The second selector would only match an a element with an href attribute having the exact value "http://www.w3.org/".
a[`rel^a~="copyright"] { ... } a[`href^a="http://www.w3.org/"] { ... }
次の選択子は、 `hreflang^a 属性が `fr^l に一致する `a^e 要素を表現する: ◎ The following selector represents an a element whose hreflang attribute is exactly "fr".
a[`hreflang^a=fr]
次の選択子は、 `hreflang^a 属性の値が `en^l から始まる `a^e 要素を表現する — すなわち, `en^l, `en-US^l, `en-scouse^l なども含まれる: ◎ The following selector represents an a element for which the value of the hreflang attribute begins with "en", including "en", "en-US", and "en-scouse":
a[`hreflang^a|="en"]
次の 2 つの選択子は、 `character^a 属性がそれぞれ別の値をとる, `DIALOGUE^e 要素を表現する ◎ The following selectors represent a DIALOGUE element whenever it has one of two different values for an attribute character:
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^a^=%val]
- [ `att^a 属性を有していて, その値は “接頭辞” %val から始まる ]ような要素を表現する。 %val が空~文字列である場合、この選択子は何も表現しない。 ◎ Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
[`att^a$=%val]
- [ `att^a 属性を有していて, その値は “接尾辞” %val で終端する ]ような要素を表現する。 %val が空~文字列である場合、この選択子は何も表現しない。 ◎ Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.
[`att^a*=%val]
- [ `att^a 属性を有していて, その値は どこかに文字列 %val を包含している ]ような要素を表現する。 %val が空~文字列である場合、この選択子は何も表現しない。 ◎ Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
属性~値に照合される %val は、 `ident-token$t または `string-token$t として与えられ~MUST。 ◎ Attribute values must be <ident-token>s or <string-token>s.
次の選択子は、画像を参照している~HTML `object$e 要素を表現する: ◎ Examples: The following selector represents an HTML object element, referencing an image:
object[`type^a^="image/"]
次の選択子は、 `href^a 属性の値が `.html^l で終端している ~HTML `a$e 要素を表現する: ◎ The following selector represents an HTML a element with an href attribute whose value ends with ".html".
a[`href^a$=".html"]
次の選択子は、[ `title^a 属性の値が部分文字列として `hello^l を包含する ]ような,~HTML `p^e 要素を表現する: ◎ The following selector represents an HTML paragraph with a title attribute whose value contains the substring "hello"
p[`title^a*="hello"]
6.3. 属性~値の文字大小区別
既定では、選択子の中の 属性~名や属性~値 の文字大小が区別されるかどうかは,文書~言語に依存する。 文書~言語による~~規則に関わりなく,属性~値を大小無視で合致させるため、`属性~選択子$の閉じ角括弧 `005D^U の直前に,識別子 `0069^U を含ませる方法が用意されている。 この~flagが在るときは、~UAは,属性の値を `~ASCII大小無視$の下で合致させ~MUST。 他の~Selectors構文と同様、識別子 `0069^U 自身も `~ASCII大小無視$である。 ◎ By default case-sensitivity of attribute names and values in selectors depends on the document language. To match attribute values 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 case-insensitively within the ASCII range. Like the rest of Selectors syntax, the i identifier is case-insensitive within the ASCII range.
次の~CSS規則は、属性~値の文字大小が区別される~XML環境の下でも, `frame^a 属性の値が `hsides^l, `HSIDES^l, `hSides^l, 等々として表現される値 `hsides^v をとるとき,~style付けを与えることになる。 ◎ The following rule will style the frame attribute when it has a value of hsides, whether that value is represented as hsides, HSIDES, hSides, etc. even in an XML environment where attribute values are case-sensitive.
[`frame^a=hsides i] { border-style: solid none; }
【 "i" の存在は、構文上は,後方互換にならないと見られる(未~supportの場合,全体が無効にされる)。 】
6.4. 属性~選択子と名前空間
`属性~選択子$の中の属性~名は,`~CSS有修飾~名$として与えられる:
属性~名には、`宣言-$済みの名前空間 接頭辞が,名前空間~区切子 `007C^U で区切られた上で,前置されてもよい。
Namespaces in XML 勧告 `XML-NAMES$r の規定に倣い、`既定の名前空間$は,属性には適用されない。
したがって,名前空間~成分を伴わない`属性~選択子$は、どの名前空間にも属さない属性のみを対象にする( |%attr
に等価)。
名前空間 接頭辞として、~asteriskが用いられてもよい。
これは、属性~名の名前空間を問わずに選択子を合致させることを指示する。
◎
The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|). 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). 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.
次の~CSSにおいて: ◎ CSS examples:
@namespace foo "http://www.example.com"; [foo|`att^a=val] { color: blue } /* 規則 1 */ [*|`att^a] { color: yellow } /* 規則 2 */ [|`att^a] { color: green } /* 規則 3 */ [`att^a] { color: green } /* 規則 4 */
規則 1 は、[ 値 `val^l をとり, かつ `http://www.example.com^l 名前空間に属する ] `att^a 属性を有する要素のみに合致することになる。 ◎ The first rule will match only elements with the attribute att in the "http://www.example.com" namespace with the value "val".
規則 2 は、(どの名前空間にも属さないものも含め)属性の名前空間を問わず, `att^a 属性を有する要素のみに合致することになる。 ◎ The second rule will match only elements with the attribute att regardless of the namespace of the attribute (including no namespace).
規則 3,4 は等価であり,いずれも どの名前空間にも属さない `att^a 属性を有する要素のみに合致することになる。 ◎ The last two rules are equivalent and will match only elements with the attribute att where the attribute is not in a namespace.
6.5. DTD 内で与えられる属性の既定~値
`属性~選択子$は、文書~木の中の属性~値を表現する。 文書~木がどのように構築されるかは、~Selectorsの視野外である。 一部の文書~形式では, DTD や他所で属性の既定~値が定義されることもあるが、それらは,文書~木に現れない限り `属性~選択子$により選択されることはない。 選択子は、既定~値が文書~木に含まれるかどうかに関わりなく,働くように設計されるべきである。 ◎ 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” を読取ってもよいとされているが、要求されてはいない。 一方で、文書の “内部~subset” の中で与えられる[ 属性の既定~値 ]については,その~~検索が要求されている。 (これらの~subsetの定義については,例えば `XML10$r を参照。) DTD の外部~subsetにて定義される[ 属性の既定~値 ]が,文書~木の中に現れるかどうかは、~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.
既定~値に `decimal^l をとる `radix^a 属性を有する `EXAMPLE^e 要素を考える。 DTD 片が次の様になっているとして: ◎ Consider an element EXAMPLE with an attribute radix that has a default value of "decimal". The DTD fragment might be
<!ATTLIST EXAMPLE radix (decimal,octal) "decimal">
~stylesheetに次の~CSS規則が与えられている場合: ◎ If the style sheet contains the rules
EXAMPLE[`radix^a=decimal] { /* …既定の~prop設定… */ } EXAMPLE[`radix^a=octal] { /* …他の設定… */ }◎ EXAMPLE[radix=decimal] { /* ... default property settings ... */ } EXAMPLE[radix=octal] { /* ... other settings... */ }
最初の規則は `radix^a 属性が既定を通して設定される — すなわち,明示的には設定されない — ような要素には合致しないかもしれない。 すべての場合に対応するためには、既定~値~用の`属性~選択子$を取り除く必要がある: ◎ the first rule might not match elements whose radix attribute is set by default, i.e. not set explicitly. To catch all cases, the attribute selector for the default value must be dropped:
EXAMPLE { /* …既定の~prop設定… */ } EXAMPLE[`radix^a=octal] { /* …他の設定… */ }◎ EXAMPLE { /* ... default property settings ... */ } EXAMPLE[radix=octal] { /* ... other settings... */ }
ここでは,選択子 `EXAMPLE[radix=octal]^S は,`型~選択子$~~単独より`詳細度$が高いので、 2 個目の規則の~style宣言は,[ `radix^a 属性~値が `octal^l ]の要素も対象にする最初の規則を上書きすることになる。 既定の場合のみを対象にするような すべての~prop宣言は、非~既定の場合を対象にする~style規則で上書きできるように,配慮する必要がある。 ◎ Here, because the selector ''EXAMPLE[radix=octal]'' is more specific than the type selector alone, the style declarations in the second rule will override those in the first for elements that have a radix attribute value of "octal". Care has to be taken that all property declarations that are to apply only to the default case are overridden in the non-default cases' style rules.
6.6. ~class選択子
`~class選択子@
は[
“終止符” `002E^U, 識別子
]並びとして与えられる。
それは、識別子により識別される “~class” に 属する 要素を表現する。
【下の例に見られる様に,要素は同時に複数の~classに属し得る。】
~classは文書~言語により定義される。
例えば `HTML5$r, `SVG11$r, `MATHML$r における~classへの所属は,
`class^a 属性により与えられる:
これらの言語では、local `class^a 属性に適用される
`~=^css 記法に等価になる(すなわち
[class~=%identifier]
)。
【 “local” — ~XML名前空間の文脈で要素に局所的,の意味と見られる】
◎
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]).
~CSS例をいくつか示す: ◎ CSS examples:
次の様にして、 `class~="pastoral"^a を伴うすべての要素に,~style情報をあてがうことができる: ◎ We can assign style information to all elements with class~="pastoral" as follows:
*.pastoral { color: green } /* all elements with class~=pastoral */
または単に ◎ or just
.pastoral { color: green } /* all elements with class~=pastoral */
次のものは `class~="pastoral"^a を伴う `h1^e 要素にのみ~styleをあてがう: ◎ The following assigns style only to H1 elements with class~="pastoral":
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
これらの規則の下では、下の 1 個目の `h1^e 要素~instanceは,その~textは green にされない一方、 2 個目のものはそうなる: ◎ Given these rules, the first H1 instance below would not have green text, while the second would:
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
次の規則は、 `class^a 属性に[ `pastoral^l, `marine^l の両方を含む,`空白$区切りの値の~list ]があてがわれているような,任意の `p^e 要素に合致する: ◎ The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:
p.pastoral.marine { color: green }
この規則は `class="pastoral blue aqua marine"^a に対しては合致するが、 `class="pastoral blue"^a に対しては合致しない。 ◎ This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
注記: ~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で区切って連結され~MUST。 しかしながら、現時点では, working group はこのような状況があり得るものと考えていない。 したがって,この挙動は、この仕様においては規範的とされない。 ◎ 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大小無視$で照合され~MUST — 他所における`~class選択子$は,文字大小を区別する。 ◎ When matching against a document which is in quirks mode, class names must be matched ASCII case-insensitively; class selectors are otherwise case-sensitive.
6.7. ~ID選択子
文書~言語には,~ID型であるものとして宣言される属性を備えているものもある。 ~ID型の属性は、それを有する要素の型に関わりなく,同じ文書の中で — その文書が文書~言語に適合する限り — 複数のそれが同じ値をとり得ない点で、特別な~~地位にある。 文書~言語が何であれ、~ID型にされている属性は,要素を一意に識別する目的に利用できる。 ~HTMLにおいては、すべての~ID型の属性は `id^c と命名されている。 ~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選択子@ は[ “番号記号” `0023^U, ~ID値 ]並びで記される。 ~ID値は `~CSS識別子$で~MUST。 ~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.)
次の~ID選択子は、~ID型の属性~値が `chapter1^l であるような, `h1^e 要素を表現する: ◎ Examples: The following ID selector represents an h1 element whose ID-typed attribute has the value "chapter1":
h1#chapter1
次の ~ID選択子は、~ID型の属性~値が `chapter1^l であるような,任意の要素を表現する: ◎ The following ID selector represents any element whose ID-typed attribute has the value "chapter1":
#chapter1
次の選択子は、~ID型の属性~値が `z98y^l であるような,任意の要素を表現する: ◎ The following selector represents any element whose ID-typed attribute has the value "z98y".
*#z98y
注記: XML 1.0 `XML10$rにおいては、どの属性が要素の~IDを与えるかについての情報は, DTD もしくは~schemaに含められる。 ~UAは~XMLを構文解析する際に,常に DTD を読取るとは限らないので、何が要素~IDを与えるのか知り得ない可能性がある(~UAは,名前空間に特有の知識を持ち得るので、その場合はどれが~ID属性なのか決定し得るが)。 ~stylesheet作者は、~UAがその種の情報を取得しない可能性もあることが判っているか疑わしいときには、代わりに通常の`属性~選択子$を用いるべきである: `#p371^S の代わりに `[name=p371]^S 等々。 ◎ 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, he should use normal attribute selectors instead: ''[name=p371] instead of #p371''.
【文書~言語にて複数種の[~IDの意味論を備えるような属性]が定義されている下で,】 要素が複数の~ID属性を有する場合、~ID選択子の目的においては,それらすべてがその要素の~IDとして扱われ~MUST。 その種の状況は `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大小無視$で照合され~MUST — 他所における`~ID選択子$は,文字大小を区別する。 ◎ When matching against a document which is in quirks mode, IDs must be matched ASCII case-insensitively; ID selectors are otherwise case-sensitive.
7. 自然言語に関する疑似類
7.1. 方向性 疑似類: `dir()^ps
`dir()@ps 疑似類により,[ `文書~言語$から決定される 【`内容~言語$の】 方向性に基づいて,要素を表現する ]ような選択子を記せるようになる。 例えば `HTML5$r では、[ `dir^a 属性, 周囲の~text, その他の要因 ]の組合せに基づいて, 要素の方向性を決定する方法 が定められている。 別の例として、 Internationalization Tag Set `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付け状態に基づかない — 例えば,~CSS `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)$ps は、左横書き( `left-to-right^en )の方向性 ( `ltr^v )を備える要素を表現する。 疑似類 `dir(rtl)$ps は、右横書き( `right-to-left^en )の方向性 ( `rtl^v )を備える要素を表現する。 `dir()$ps がとる引数は、単独の識別子で~MUST。 他の場合、選択子は無効になる。 識別子と丸括弧の間に`空白$が挟まれていてもよい。 `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(C)^css と `[dir=C]^S の相違は、後者が要素~上の与えられた属性に対してのみ,比較を遂行する一方で、 `:dir(C)^S 疑似類は,比較の際に ~UA が備える文書の意味論についての知識が利用される点にある。 例えば、~HTMLの要素の方向性は、 `dir^a 属性を有さない子にも,妥当な `dir^a 属性を有する先祖があれば,それらのうちの直近のものに備わる方向性を継承する。 別の例として、 `[dir=auto]^S に合致する~HTMLの要素は、その内容から解決される方向性に依存して, `dir(ltr)$ps または `dir(rtl)$ps に合致することになる。 `HTML5$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で与えられる。 選択子が有効になるためには、 `lang()$ps の中の各 `言語範囲@ が,妥当な [ `ident$t または `string$t ]で~MUST(例えば ~asteriskを包含する言語範囲は、文字列として引用符で括られ~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 represents an element that is in one of the languages listed in its argument. It accepts a comma-separated list of one or more language ranges as its argument. Each language range in :lang() must be a valid CSS <ident> or <string>. (Language ranges containing asterisks, for example, must be quoted as strings.)
要素の`内容~言語$は、文書~言語により定義される。 例えば~HTML `HTML5$r では、`内容~言語$は[ `lang^a 属性, `meta$e 要素からの情報, 場合によっては~protocol(例えば~HTTP~headerからの) ]の組合せから決定される。 ~XML言語 `XML10$r では、 `xml:lang^a 属性を利用して,要素の言語~情報を指示できる。 ◎ Note: The content language of an element is defined by the document language. 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]
要素の`内容~言語$は、(必要なら BCP 47 構文に正規化された上で) `RFC4647$r 3.3.2 節 Matching of Language Tags (“言語~tagの照合”)の `extended filtering^en ( “拡張絞り込み” )演算により与えられる `language range^en ( “言語範囲” )に合致するとき、`言語範囲$に合致するとされる。 この照合は,`~ASCII大小無視$の下で遂行される。 この比較においては、`言語範囲$が妥当な言語~codeであるかどうか考慮する必要は無い。 ◎ The element’s content language matches a language range if its content language (normalized to BCP 47 syntax if necessary) matches the given language range in an extended filtering operation per [RFC4647] Matching of Language Tags (section 3.3.2). The matching is performed case-insensitively within the ASCII range. The language range does not need to be a valid language code to perform this comparison.
注記:
文書および~protocolにおいては, BCP 47 `BCP47$r またはその後継版の~codeを利用して、あるいは~XML `XML10$r に基づく文書においては, xml:lang
属性を通して、言語を指示することが推奨される。
“FAQ: 2 文字または 3 文字の言語~code”
を見よ。
◎
Note: It is recommended that documents and protocols indicate language using codes from BCP 47 [BCP47] or its successor, and by means of xml:lang attributes in the case of XML-based documents [XML10]. See "FAQ: Two-letter or three-letter language codes."
次のうち最初の 2 つの選択子は,順に ベルギー・フランス語, ドイツ語 で書かれた~HTML文書を表現し、その次の 2 つの選択子は,それぞれの言語に属する任意の要素の子である “引用文” `q$e 要素を表現する: ◎ Examples: The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.
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.
次の~HTML例では、 `[lang|=fr]^S には,( `lang^a 属性を有する) `body$e のみが合致する一方で、 `:lang(fr)^css には `body$e と `p$e の両者が合致する(両者ともフランス語に属するものとされるので)。 `p$e は `lang^a 属性を有さないので, `[lang|=fr]^S に合致しない。 ◎ In this HTML example, only the BODY matches ''[lang|=fr]'' (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French). The P does not match the ''[lang|=fr]'' because it does not have a LANG attribute.
<body lang=fr> <p>Je suis français.</p> </body>
`:lang(C)^css と `|=^css 演算子のもう一つの相違は、 `:lang(C)^css が暗黙的に~wildcard照合を遂行する点にある。 ◎ Another difference between :lang(C) and the ''|='' operator is that :lang(C) performs implicit wildcard matching.
例えば, `:lang(de-DE)^S は、次のすべてに合致することになる ⇒# `de-DE^l, `de-DE-1996^l, `de-Latn-DE^l, `de-Latf-DE^l, `de-Latn-DE-1996^l ◎ For example, :lang(de-DE) will match all of de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE, de-Latn-DE-1996,\
一方で `[lang|=de-DE]^S は、これらのうち[ `de-DE^l, `de-DE-1996^l ]のみに合致することになる。 ◎ whereas of those ''[lang|=de-DE] will only match de-DE'' and de-DE-1996.
最初の下位tag(第一~言語)に対しては,~wildcardによる照合を遂行するためには、~asteriskを利用し~MUST: 例えば `*-CH^S は `de-CH^l, `it-CH^l, `fr-CH^l, `rm-CH^l のすべてに合致することになる。 ◎ To perform wildcard matching on the first subtag (the primary language), an asterisk must be used: *-CH will match all of de-CH, it-CH, fr-CH, and rm-CH.
`lang^a 属性を有する要素を対象に,`言語範囲$を用いて照合するためには、`属性~選択子§と`自然言語 疑似類§を併用する — 例えば: `[lang]:lang(de-DE)^css ◎ To select against an element’s lang attribute value using this type of language range match, use both the attribute selector and language pseudo-class together, e.g. [lang]:lang(de-DE).
注記: ~wildcard言語~照合と~comma区切りの~listは,~Level 4 にて新たに~~導入された。 ◎ Note: Wildcard language matching and comma-separated lists are new in Level 4.
8. 所在 疑似類
8.1. ~hyperlink疑似類: `any-link^ps
`any-link@ps 疑似類は、~hyperlinkの~source~anchorとしてふるまう要素を表現する。 例えば `HTML5$r では、 `href^a 属性を有する任意の `a$e, `area$e, `link$e 要素が~hyperlinkであり, `any-link$ps にも合致する。 それは, `link$ps または `visited$ps に合致する要素に合致し、 `:matches(: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, area, or link 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 :matches(:link, :visited).
8.2. ~link履歴 疑似類: `link^ps, `visited^ps
~UA は、共通的に,未訪問の ~hyperlink を訪問-済みのそれと異なる表示にする。 ~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^css ~classに属していて, かつ既に訪問-済みの~linkを表現する: ◎ The following selector represents links carrying class footnote and already visited:
.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は,~layoutも含め,他のどの状態にも影響しないもの(ほぼ色のみ)に限られている (~~参考)。 】
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の素片も合致し~MUST — 含まない場合、現在の~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.
例えば,次の規則は、現在の頁を~targetにしている~linkが~navi~list `nav^e の一部を成すときに,下線が引かれないようにする: ◎ For example, the following rule prevents links targetting the current page from being underlined when they are part of the navigation list:
nav :local-link { text-decoration: none; }
注記: 頁の現在の~URLを変化させ得るものには、次が挙げられる:
- 利用者による動作の結果として、同じ頁の中で異なる素片を~targetにしている~linkが作動化されたとき
- `pushState^c ~APIの利用
- あるいは、もっと明白な動作 — 異なる頁へ~navigateしたり,~redirectに追従する(~HTTPなどの~protocol, `<meta http-equiv="...">^c などの~markupによる指示書き, ~scriptingの指示書きなどにより起動され得る)など。
~UAは、そのようなどの状態~変化に対しても,[ `local-link$ps / `target$ps / `target-within$ps ]疑似類が正しく応答することを確保し~MUST。
◎ Note: The current URL of a page can change as a result of user actions such as activating a link targetting a different fragment within the same page; or by use of the pushState API; as well as by the more obvious actions of navigating to a different page or following a redirect (which could be initiated by protocols such as HTTP, markup instructions such as <meta http-equiv="...">, or scripting instructions ). UAs must ensure that :local-link, as well as the :target and :target-within pseudo-classes below, respond correctly to all such changes in state.8.4. ~target疑似類: `target^ps
文書~言語によっては、文書の~URLは、文書~自身のみならず,~URLの`素片$を介して 文書の 中の 特定の要素を指す。 この仕方で指される要素は、文書の~target要素とされる。 ◎ 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.
~HTMLにおける素片は、頁~内で同じ~IDを有する要素を指す。 例えば~URL `https://example.com/index.html#section2^l は、 `https://example.com/index.html^l にある文書~内の[ `id^a が `section2^l にされている要素 ]を指す。 ◎ In HTML the fragment points to the element in the page with the same ID. The url https://example.com/index.html#section2, for example, points to the element with id="section2" in the document at https://example.com/index.html.
`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
この選択子は、参照元~URLから~target要素にされていて, `note^l ~classに属するような, `p^e 要素を表現する: ◎ This selector represents a p element of class note that is the target element of the referring URL.
次のものは、 `target$ps 疑似類を利用して,~target要素の色を `red^v にするとともに,その先頭に画像を配置する: ◎ CSS example: Here, the :target pseudo-class is used to make the target element red and place an image before it, if there is one:
:target { color : red } :target::before { content : url(target.png) }
8.5. ~target容器~疑似類: `target-within^ps
`target-within@ps 疑似類は、 `target$ps 疑似類が適用される要素に加えて,[ 要素のうち,その`平坦~木$内のある子孫(~text~nodeなどの非~要素~nodeも含む)が[ `target-within$ps 【 `target$ps ?】に合致するための条件 ]に合致するもの ]にも適用される。 ◎ The :target-within pseudo-class applies to elements for which the :target pseudo class applies as well as to an element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :target-within.
8.6. 起点要素 疑似類: `scope^ps
ある種の文脈の下では、選択子は,明示的な `~scope_ps要素@ の集合に対し、照合される。 これは、[ 選択子を合致させる際の対象範囲 ]の起点にされるような,要素の(空にもなり得る)集合である。 例えば、 `DOM$r の `querySelector()$c の引数に指定されるものなど。 ◎ In some contexts, selectors can be matched with an explicit set of :scope elements. This is is a (potentially empty) set of elements that provide a reference point for selectors to match against, such as that specified by the querySelector() call in [DOM].
`scope@ps 疑似類は、`~scope_ps要素$とされている任意の要素を表現する。 `~scope_ps要素$が明示的に指定されていないが,選択子が`視野付き$, かつ その`視野根$は要素である場合、 `scope$ps は,`視野根$を表現する。 他の場合、それは,文書の根を表現する( `root$ps に等価になる)。 この疑似類を文書の根~要素でない特定の要素に合致させることを意図する仕様は、`視野根$(`視野付き選択子$を利用している場合), あるいは `~scope_ps要素$とされる集合を,明示的に定義し~MUST。 ◎ The :scope pseudo-class represents any element that is a :scope element. If the :scope elements are not explicitly specified, but the selector is scoped and the scoping root is an element, then :scope represents the scoping root; otherwise, it 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 either a scoping root (if using scoped selectors) or an explicit set of :scope elements.
9. 利用者~動作 疑似類
対話的~UIは、利用者の動作に呼応して,具現化-法を変えることがある。 ~Selectorsは、利用者が動作している要素を選択するための,数種の利用者~動作 疑似類を供する。 (これらの疑似類は,非~対話的~UAにおいても妥当であるが、どの要素にも決して合致しない。) ◎ Interactive user interfaces sometimes change the rendering in response to user actions. Selectors provides several user action pseudo-classes for the selection of an element the user is acting on. (In non-interactive user agents, these pseudo-classes are valid, but never match any element.)
これらの疑似類は両立し得る。 要素は そのような複数の疑似類に同時に合致し得る。 ◎ These pseudo-classes are not mutually exclusive. An element can match several such pseudo-classes at the same time.
a:link /* 未訪問の~link */ a:visited /* 訪問-済み~link */ a:hover /* 利用者による~hover */ a:active /* 作動中の~link */◎ a:link /* unvisited links */ a:visited /* visited links */ a:hover /* user hovers */ a:active /* active links */
動的~疑似類を組合せる用例: ◎ An example of combining dynamic pseudo-classes:
a:focus a:focus:hover
2 個目の選択子は、疑似類 `focus^ps, `hover^ps の両者に合致するような `a^e 要素に合致する。 ◎ The last selector matches a elements that are in the pseudo-class :focus and in the pseudo-class :hover.
注記: この節にて定義される一部の疑似類を適用するために必要になる,接触判定の詳細は、将来に定義されることになる。 ◎ Note: The specifics of hit-testing, necessary to know when several of the pseudo-classes defined in this section apply, are not yet defined, but will be in the future.
9.1. ~pointer~hover 疑似類: `hover^ps
`hover@ps 疑似類は、利用者が~pointing装置で,要素を指していて、実際に作動化させる必要はない間に適用される。 例えば,視覚的~UAでは、~cursor(~mouse~pointer)が[ 要素により生成された`~box$ ]上を~hoverしたとき,この疑似類を適用することもできる。 ~hardware制限に因り~hover~~状態を検出できない対話的~UA(例えば~pen機器)は、この機能を~supportしなくとも,`適合性§には反しない — そのような~UAにおいては、単純に,[ その種の選択子が 何かに合致することは、決してない ]ことになる。 ◎ The :hover pseudo-class applies while the user designates an 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.
要素のいずれかの子孫が[ `平坦~木$(~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 に合致し得る追加の仕方を定義してよい。 例えば `HTML5$r は、~labelが付与された~control要素は,その~labelを与えている `label$e 要素が~hoverされたとき, `hover$ps に合致するものと定義している( 参照 )。 ◎ 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.
`hover$ps 疑似類は任意の`疑似要素$に適用できる。 ◎ The :hover pseudo-class can apply to any pseudo-element.
9.2. 作動化 疑似類: `active^ps
`active@ps 疑似類は、利用者により作動化された要素を対象にする。 例えば,利用者が~mouse~buttonを押してから離すまでの間。 複数の~mouse~buttonを備える~systemでは、第一~button/第一~作動化~button(概して, “左” ~mouse~button), あるいはそれを~~代理するもののみが, `active$ps の対象になる。 ◎ The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
`active$ps になれる要素には、[ 文書~言語の/実装に特有の ]制限-があり得る。 例えば `HTML5$r では、一連の 作動可能な要素 を定義している。 ◎ There may be document-language or implementation-specific limits on which elements can become :active. For example, [HTML5] defines a list of activatable elements.
要素のいずれかの子孫が[ `平坦~木$(~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.
文書~言語は、要素が `active$ps に合致し得る追加の仕方を定義してよい。 ◎ Document languages may define additional ways in which an element can match :active.
注記: 要素は同時に `visited$ps かつ `active$ps(あるいは `link$ps かつ `active$ps )になり得る。 ◎ Note: An element can be both :visited and :active (or :link and :active).
9.3. 入力~focus疑似類: `focus^ps
`focus@ps 疑似類は、要素が~focusを得ている([ ~keyboard/~mouse ~event, その他の形 ]による入力を受容する)間だけ,適用される。 ◎ The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
~focusを獲得できる要素には,文書~言語/実装に特有の制限-があり得る。 例えば `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 疑似類は,要素の親に自動的に伝播しては~MUST_NOT — 親への合致-が欲される場合は `focus-within$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. (It 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 要素へ伝播する ]ことが欲されている。 それに対する主な異議は、実装の困難さに見受けられる。 ~CSSに対する課題, ~HTMLに対する課題 を見よ。 ◎ 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-visible@ps 疑似類は、 `focus$ps 疑似類に合致している要素のうち,[ ~UAが、[ その~focusは,要素~上に~~明示されるべきである ]と,経験則を介して決定したもの ]に適用される(多くの~browserは、この事例において,既定では “~focus環” を示す†)。 【† ~focus環( `focus ring^en )とは、~focus~navi順を表現する概念的な “環” であり,絵柄的な “輪” ではないことに注意。すなわち, ~focus環の一部を成している要素に合致する。】 ◎ The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.)
例えば,~UAは概して、~text欄が~focusされている間は — 要素の内容に~keyboard入力が影響する事が注目されるよう — ~focus指示子を表示する。 ◎ For example, UAs typically display focus indicators on text fields any time they’re focused, to draw attention to the fact that keyboard input will affect their contents.
他方,~UAは概して、~buttonに対しては,それが~keyboard対話により~focusされたとき(文書を~tab-keyで巡回するなど)に限り,~focus指示子を表示する。 そのような対話~後の~focusの移動-先は,常に直ぐに明白になるとは限らない一方で、[ ~buttonを~mouse~pointerで~clickするなど、もっと明白に~targetされる対話により,~buttonが~focusされた ]ときは,利用者~自身に明らかなので。 ◎ On the other hand, UAs typically only display focus indicators on buttons when they were focused by a keyboard interaction (such as tabbing through the document)—because it’s not always immediately obvious where the focus has gone after such an interaction, but is sufficiently self-evident when the button was focused by more obviously-targetted interactions, like clicking on the button with a mouse pointer.
頁~作者は、~focusされた状態の要素に~styleをあてがうために `focus$ps / `focus-visible$ps を利用するかどうか決める際には、以下に挙げる指針に従うべきである: ◎ Page authors should follow these guidelines when deciding whether to use :focus or :focus-visible to style the focused state of an element:
- 要素が “~nativeな” ~focus指示子の挙動(~text欄や~buttonなど)を備える場合は、 `focus-visible$ps を利用する。 ◎ If the element has “native” focus indicator behavior (such as text fields or buttons), use :focus-visible.
- 他の場合,要素が~text入力を模倣している, または ~keyboard対話を受取るよう意図された何かである場合は、 `focus$ps を利用する。 ◎ Otherwise, if the element is emulating a text input, or something else that is intended to receive keyboard interaction, use :focus.
- 他の場合、 `focus-visible$ps を利用する。 ◎ Otherwise, use :focus-visible.
~UAが要素~上の~focusを[ 特別に指示するかどうか / いつ特別に指示するか ]は、~UAに依存する。 ~UAが 要素を `focus-visible$ps に合致させるかどうかは、個々の~UAのみならず, 自身が稼働している~OSや利用者~設定に応じて異なり得る。 ◎ When UAs choose to specially indicate focus on an element, or whether they specially indicate focus at all, is UA-dependent. Different UAs, the same UA on different operating systems, or the same UA on the same OS, but with different user settings, can make different choices as to when an element matches :focus-visible.
次の指針が、 `focus-visible$ps を “~nativeな” ~focus指示子の挙動を伴わない要素にいつ適用するかを選ぶ経験則として示唆される: ◎ The following guidelines are suggested heuristics for choosing when to apply :focus-visible to elements without “native” focus indicator behavior:
- 要素が~keyboard対話を介して~focusを受取った場合、間接的なもの — ~keyboardを用いて~buttonを押すことにより~dialogを誘発するなど — も含め, `focus-visible$ps を適用する。 ◎ If the element received focus via a keyboard interaction, including indirectly, such as triggering a dialog by pressing a button using the keyboard, apply :focus-visible.
- 要素が~focusされている間に~keyboard~eventが生じた場合、~keyboard対話により~focusされていない場合でも `focus-visible$ps を適用する。 ◎ If a keyboard event occurs while an element is focused, even if the element wasn’t focused by a keyboard interaction, apply :focus-visible.
9.5. ~focus容器~疑似類: `focus-within^ps
`focus-within@ps 疑似類は、 `focus$ps 疑似類が適用される要素に加えて,[ 要素のうち,その`平坦~木$内のある子孫(~text~nodeなどの非~要素~nodeも含む)が[ `focus$ps に合致するための条件 ]に合致するもの ]にも適用される。 ◎ The :focus-within pseudo-class applies to any element for which the :focus pseudo class applies as well as to an element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus.
9.6. ~drop先~疑似類: `drop^ps, `drop()^ps
`drop@ps 疑似類は、利用者が “~dropできる” ~itemを “~dragしている” あるいは概念的な意味で “持ち運んでいる” 間にのみ適用され、文書~言語により【~itemの種類は問わない下で】 “~drop先” として定義されているすべての要素に合致する。 ◎ The :drop pseudo-class applies to all elements that are drop targets, as defined by the document language, while the user is “dragging” or otherwise conceptually carrying an item to be “dropped”.
`drop()@ps `関数形~疑似類$は【引数なしならば】 `drop$ps に一致するが、一部の~drop先を除外する追加の~filterも指定できる。 その構文は次で与えられる: ◎ The :drop() functional pseudo-class is identical to :drop, but allows additional filters to be specified that can exclude some drop targets. Its syntax is:
:drop( [ active || valid || invalid ]? )
各~keywordの意味は: ◎ The keywords have the following meanings:
- `active^v
- ~drag操作~用の現在の~drop先に限り合致する。 すなわち,利用者がその場所で~dragを解放したならば、この~drop先に~dropされることになる。 ◎ The drop target is the current drop target for the drag operation. That is, if the user were to release the drag, it would be dropped onto this drop target.
- `valid^v
- 文書~言語にて,~drop先に対する “有効” / “無効” の概念が規定されている場合、これは,現在~dragされている~obj用に有効な~drop先であるものに限り合致する。 他の場合、すべての~drop先に合致する。 ◎ If the document language has a concept of “valid” and “invalid” drop targets, this only matches if the drop target is valid for the object currently being dragged. Otherwise, it matches all drop targets.
-
例えば,~HTMLの `dropzone^a 属性は、~drop先が,与えられた型の文字列や~fileに限り受容するように指定し得る。【この属性は、除去された】 ◎ For example, HTML’s dropzone attribute can specify that the drop target only accepts strings or files that are set to a given type. - `invalid^v
- 文書~言語にて,~drop先に対する “有効” / “無効” の概念が規定されている場合、これは,現在~dragされている~obj用には無効な~drop先であるものに限り合致する。 他の場合、すべての~drop先に合致する。 ◎ If the document language has a concept of “valid” and “invalid” drop targets, this only matches if the drop target is invalid for the object currently being dragged. Otherwise, it matches nothing.
引数に複数の~keywordを組合せることもできる。 この場合、合致する~drop先は,それらの~keywordによる~~条件をすべてを満たすことを意味する。 例えば `:drop(valid active)^S は、現在の~drop先であって, かつ 有効なもののみに合致することになる。 ◎ Multiple keywords can be combined in the argument, representing only drop targets that satisfy all of the keywords. For example, :drop(valid active) will match the active drop target if it’s valid, but not if it’s invalid.
引数に~keywordが一つも与えられなかった場合、 `drop()$ps は `drop$ps と同じ意味 — すなわち,どの~drop先にも合致することになる。 ◎ If no keywords are given in the argument, :drop() has the same meaning as :drop—it matches every drop target.
このscenario を例にして示す。 ◎ Turn this scenario into an example.
10. 時系列 疑似類
この節の疑似類は、何らかの時列線の下で,現在表示中の, あるいはその作動期間に基づいて,要素を分類する。 文書を発話として具現化するときや, WebVTT を利用して~videoを表示する間に,字幕を描画するなどの用途がある。 ◎ These pseudo-classes classify elements with respect to the currently-displayed or active position in some timeline, such as during speech rendering of a document, or during the display of a video using WebVTT to render subtitles.
~CSSはこの時列線を定義しない。 それは~host言語が定義し~MUST。 これらの疑似類は、時列線が定義されていない要素に合致しては~MUST_NOT。 ◎ CSS does not define this timeline; the host language must do so. If there is no timeline defined for an element, these pseudo-classes must not match the element.
注記: `current$ps 要素の先祖もまた `current$ps になるが、 `future$ps 要素の先祖も `future$ps になる必要はない。 与えられた要素は、少なくとも `current$ps, `past$ps, `future$ps のいずれかに合致する。 ◎ Note: Ancestors of a :current element are also :current, but ancestors of a :past or :future element are not necessarily :past or :future as well. A given element matches at most one of :current, :past, or :future.
10.1. 現在要素 疑似類: `current^ps
`current@ps 疑似類は、現在表示中の要素, またはその先祖の要素を表現する。 ◎ The :current pseudo-class represents the element, or an ancestor of the element, that is currently being displayed.
`matches()$ps と同様に`合体~選択子$の~listを引数にとる,関数形fの `current()^ps もある。 この場合、 ~E を `current$ps 要素とするとき, ~E が引数にも合致するならば ~E 自身を表現し、合致しない場合は[ ~E の先祖であって, 引数に合致する要素のうち ~E に最も近い先祖 ]を表現する(どれにも合致しない場合は何も表現しない)。 ◎ Its alternate form :current(), like :matches(), 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 要素の先祖のうち引数に合致するような “最も近い先祖” なのかどっち? 】
例えば 次の規則は、文書を発話として具現化するときに,読み上げられる段落, または~list~itemを強調することになる: ◎ For example, the following rule will highlight whichever paragraph or list item is being read aloud in a speech rendering of the document:
:current(p, li, dt, dd) { background: yellow; }
10.2. 過去要素 疑似類: `past^ps
`past@ps 疑似類は、全体が `current$ps 要素より先に生じるものと定義されている,任意の要素を表現する。 例えば、 WebVTT 仕様は `past$ps 疑似類を media 要素の現在の再生位置に相対的 なものとして定義する。 文書~言語に要素の時系列順が定義されていない場合、これは `current$ps 要素に先行するすべての同胞要素を表現する。 ◎ 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. 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 要素の現在の再生位置に相対的 なものとして定義する。 文書~言語により要素の時系列順が定義されていない場合、これは `current$ps 要素に後続するすべての同胞要素を表現する。 ◎ 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. 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. 資源~状態~疑似類
この節の疑似類は、特に画像/動画などの 読込まれた資源を表現する要素に適用され、作者が,それらを何らかの状態の~~質に基づいて選択できるようにする。 ◎ The pseudo-classes in this section apply to elements that represent loaded resources, particularly images/videos, and allow authors to select them based on some quality of their state.
11.1. 動画/音声 再生-状態: `playing^ps, `paused^ps 疑似類
`playing@ps 疑似類は、[ “再生-中”, “静止-中” になれるような,音声や動画の類の資源 ]を表現していて, “再生-中にある” ような要素を表現する(これには、要素が明示的に再生されているときの他に、 “~buffer中” にあるなど、利用者の意図によらない何らかの事由で一時的に停止されていて,その事由が解決された時点で自動的に再開する状態も含まれる。) ◎ The :playing pseudo-class represents an element representing an audio, video, or similar resource 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” state.)
`paused@ps 疑似類は、同じ要素を表現するが,それが “再生-中” でないときに合致する(これには、明示的に “静止された” 状態の他に, “読込まれたが,まだ作動化されていない” ことにより再生-中でない状態も含まれる)。 ◎ The :paused pseudo-class represents the same elements, but instead match when the element is not “playing”. (This includes both an explicit “paused” state, and other non-playing states like “loaded, hasn’t been activated yet”, etc.)
12. 入力 疑似類
この節の疑似類のほとんどは、~HTMLの `input$e 要素など,利用者からの入力をとる要素を対象にする。 ◎ The pseudo-classes in this section mostly apply to elements that take user input, such as HTML’s input element.
12.1. 入力~controlの状態
12.1.1. 操作可否 疑似類: `enabled^ps, `disabled^ps
[ `enabled@ps / `disabled@ps ]疑似類は、[ 可能化-/不能化- ]された~UI要素を表現する。 その種の要素は、対応する[ 不能化/可能化 ]状態も備え~MUST。 ◎ The :enabled pseudo-class represents user interface elements that are in an enabled state; such elements must have a corresponding disabled state. ◎ Conversely, the :disabled pseudo-class represents user interface elements that are in a disabled state; such elements must have a corresponding enabled state.
何が~UI要素とされ,[ 可能化/不能化 ]の状態がどのように定まるのかは~host言語に依存する。 大概の文書では、ほとんどの要素は[ `enabled$ps / `disabled$ps ]の対象にならない。 例えば `HTML5$r では、対話的~要素のうち,不能化されていないものが `enabled^ps である( 参照 )とされ,明示的に不能化されている要素が `disabled^ps である( 参照 )とされている。 ◎ What constitutes an enabled state, a disabled state, and a user interface element is host-language-dependent. In a typical document most elements will be neither :enabled nor :disabled. For example, [HTML5] defines non-disabled interactive elements to be :enabled, and any such elements that are explicitly disabled to be :disabled.
注記: 利用者が与えられた~UI要素と対話できるかどうかに影響する~CSS~propは、それが[ `enabled$ps / `disabled$ps ]に合致するかどうかに影響しない。 例えば, `display$p や `visibility$p ~propは、要素の[ 可能化/不能化 ]の状態に対し,効果を持たない。 ◎ Note: CSS properties that might affect a user’s ability to interact with a given user interface element do not affect whether it matches :enabled or :disabled; e.g., the display and visibility properties have no effect on the enabled/disabled state of an element.
12.1.2. 変更可否 疑似類: `read-only^ps, `read-write^ps
`read-write@ps は、文書~言語により,利用者が内容を改めれるものと定義される要素に合致する。 他のものは `read-only@ps に合致する。 ◎ An element matches :read-write if it is user-alterable, as defined by the document language. Otherwise, it is :read-only.
例えば `HTML5$r では、次のいずれかに該当する要素が `read-write^ps とされている( 参照 ):
- 不能化されていない, かつ読専でない `input$e 要素
- `contenteditable^a 属性が true 状態にあるような,任意の要素
12.1.3. 仮入力例示 疑似類: `placeholder-shown^ps
入力~要素は、利用者~向けの~hintとして仮入力~textを例示することがある。 例えば `HTML5$r の `placeholder^a 属性。 `placeholder-shown@ps 疑似類は、そのような仮入力~textを例示している入力~要素に合致する。 ◎ Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in [HTML5]. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text.
12.1.4. 既定option 疑似類: `default^ps
`default@ps 疑似類は、一連の要素の中で既定の選択肢にされているような,~UI要素を対象にする。 複数のものが既定にされていてもよい。 概して, ~context~menu~item, ~button, ~select~list, ~select~menu が対象になる。 ◎ The :default pseudo-class applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons and select lists/menus.
例えば、一連の~buttonの中の既定の提出-~buttonや, ~popup~menuの中の既定optionなど。 多数の選択肢がある~groupの中では,複数の要素が `default$ps に合致し得る。 例えば `HTML5$r では、[ ~formの中の “既定の” ~button, `select$e 要素のうち初期~時に選択-済みの `option$e 要素(複数も可), その他の少数の要素 ]が、 `default$ps に合致するものとされている( 参照 )。 ◎ One example is the default submit button among a set of buttons. Another example is the default option from a popup menu. In a select-many group (such as for pizza toppings), multiple elements can match :default. For example, [HTML5] defines that :default matches the “default button” in a form, the initially-selected <option>(s) in a <select>, and a few other elements.
12.2. 入力~値の状態
12.2.1. 選択-済み疑似類: `checked^ps
~radio~buttonや~checkboxは,利用者により 2 つの状態に切り替えられ得る。 また、一部の~menu~itemは,利用者がそれを選択したとき “~checkされた状態” になる。 その種の要素が “~on” に切り替えられたとき `checked@ps 疑似類の対象になる。 例えば `HTML5$r では、[ ~checkされている[ ~checkbox / ~radio~button ] / 選択されている `option$e 要素 ]が `checked^ps に合致するものと定義されている( 参照 )。 ◎ Radio and checkbox elements can be toggled by the user. Some menu items are “checked” when the user selects them. When such elements are toggled “on” the :checked pseudo-class applies. For example, [HTML5] defines that checked checkboxes, radio buttons, and selected <option> elements match :checked.
`checked$ps 疑似類は生来的に動的であり,利用者の動作により改められ得るものであるが、文書の中の意味論を与える属性の存在( `HTML5$r の `selected^a 属性や `checked^a 属性など)に基づくものでもあるので,【静的~媒体も含む】すべての媒体に適用される。 ◎ While the :checked pseudo-class is dynamic in nature, and can altered by user action, since it can also be based on the presence of semantic attributes in the document (such as the selected and checked attributes in [HTML5]), it applies to all media.
否定~疑似類を用いれば、~checkされていない~checkboxも選択できる: ◎ An unchecked checkbox can be selected by using the negation pseudo-class:
input[type=checkbox]:not(:checked)
12.2.2. 不定 疑似類: `indeterminate^ps
`indeterminate@ps 疑似類は、値が不定の状態にある~UI要素を対象にする。 例えば、~UI要素[ ~radio~button/~checkbox ]は,~checkの有無が切り替えられ得るが、そのいずれでもない不定の状態をとることもある。 同様に、進捗計は完了率が未知であるときに,不定の状態をとり得る。 例えば `HTML5$r では、~checkboxがどのようなときに `indeterminate^ps に合致するかを定めている( 参照 )。 ◎ The :indeterminate pseudo-class applies to UI elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown. For example, [HTML5] defines how checkboxes can be made to match :indeterminate.
`checked$ps 疑似類と同様に、 `indeterminate$ps も すべての媒体に適用される。 例えば,初期~時に選択-済みのものがない~radio~groupの各~部品は、静的~表示の下でも `indeterminate$ps になる。 ◎ Like the :checked pseudo-class, :indeterminate applies to all media. Components of a radio-group initialized with no pre-selected choice, for example, would be :indeterminate even in a static display.
12.3. 入力~値の検査-法
12.3.1. 妥当性 疑似類: `valid^ps, `invalid^ps
要素は,その内容あるいは値が文書~言語(例えば `XFORMS11$r や `HTML5$r )により定義される~data妥当性~意味論に則って 妥当であるかどうかに従って, `valid@ps (妥当である)/ `invalid@ps (妥当でない) とされる。 ~data妥当性~意味論を欠く要素は、これらの疑似類の対象にならない。 ◎ An element is :valid or :invalid when its contents or value is, respectively, valid or invalid with respect to data validity semantics defined by the document language (e.g. [XFORMS11] or [HTML5]). An element which lacks data validity semantics is neither :valid nor :invalid.
注記: 拘束がなく, したがって常に `valid$ps になる要素と,~data妥当性~意味論を全く備えず, したがって `valid$ps でも `invalid$ps でもないものは、別物であることに注意。 例えば~HTMLでは、 `type="text"^a の `input$e 要素は,拘束なしになり得る一方で、 `p$e 要素は,~data妥当性~意味論を備えず これらの疑似類に合致することは決してない。 ◎ Note: There is a difference between an element which has no constraints, and thus would always be :valid, and one which has no data validity semantics at all, and thus is neither :valid nor :invalid. In HTML, for example, an <input type="text"> element may have no constraints, but a p element has no validity semantics at all, and so it never matches either of these pseudo-classes.
12.3.2. 範囲~疑似類: `in-range^ps, `out-of-range^ps
[ `in-range@ps / `out-of-range@ps ]疑似類が適用されるのは、範囲に制限がある要素に限られる。 要素に束縛されている値が,文書~言語により定義される範囲の[ 範囲~内/範囲~外 ]にあるならば、要素は[ `in-range$ps / `out-of-range$ps ]に合致する。 ~data範囲が制限されない要素や, ~form~controlでない要素は、[ `in-range$ps / `out-of-range$ps ]の対象にならない。 例えば、次のような要素は `out-of-range$ps になる: 1 〜 10 の値のみを表現する~slider~controlとして呈示されている `slider^e 要素の値が 11 であるとき / ~~選択肢 "A", "B", "C" のみがある~popup~menuとして呈示されている `menu$e 要素の値が "E" であるとき。 ◎ The :in-range and :out-of-range pseudo-classes apply only to elements that have range limitations. An element is :in-range or :out-of-range when the value that the element is bound to is in range or out of range with respect to its range limits as defined by the document language. An element that lacks data range limits or is not a form control is neither :in-range nor :out-of-range. E.g. a slider element with a value of 11 presented as a slider control that only represents the values from 1-10 is :out-of-range. Another example is a menu element with a value of "E" that happens to be presented in a popup menu that only has choices "A", "B" and "C".
12.3.3. 必須随意 疑似類: `required^ps, `optional^ps
~form要素【~form部品の総称】は、それが属する~formが妥当なものとして提出-可能になるために,その値が 必須( `required^en )なのか/随意( `optional^en )なのか に応じて `required@ps / `optional@ps の対象になる。 ~form要素でない要素は、これらの対象にならない。 ◎ A form element is :required or :optional if a value for it is, respectively, required or optional before the form it belongs to can be validly submitted. Elements that are not form elements are neither required nor optional.
【 文面からは、 ~HTML `form$e 要素の外で用いられた `input$e 要素などの~form部品は, “~form要素でない” とも読めそうだが、そうでもないようだ( ~HTML仕様の該当する記述 )。 】
12.3.4. 利用者~対話 疑似類: `user-invalid^ps
`user-invalid@ps 疑似類†は、入力~値が不正であるが,利用者がそれと対話した 後に限り 対象になる要素を表現する。 `user-invalid$ps 疑似類は、利用者が~formの提出-を試みてから 利用者が再びその~form要素と意識的に対話する前までの間の,[ `invalid$ps , `out-of-range$ps , 未~入力の `required$ps ]の要素に合致し~MUST。 ~UA は,利用者に向けて~errorを強調することが適切であるときには、そのような要素に合致させてもよい。 例えば~UAは、利用者が一度 何らかの~textを~~手入力してから別の要素に~focusを移動させたときに, `invalid$ps な要素を `user-invalid$ps 合致するようにした上で、利用者が入力を成功裡に正した後にのみ,合致しないようにしてもよい。 ◎ The :user-invalid pseudo-class represents an element with incorrect input, but only after the user has significantly interacted with it. The :user-invalid pseudo-class must match an :invalid, :out-of-range, or blank-but-:required elements between the time the user has attempted to submit the form and before the user has interacted again with the form element. User-agents may allow it to match such elements at other times, as would be appropriate for highlighting an error to the user. For example, a UA may choose to have :user-invalid match an :invalid element once the user has typed some text into it and changed the focus to another element, and to stop matching only after the user has successfully corrected the input.
例えば,次の文書~片における入力は、頁が読込まれ次第(初期~時の値( `value=11^a )が最大~値( `max=10^a )を超えているので), `invalid$ps に合致することになるが、利用者が要素と意識的に対話するか, それが属する~formの提出-を試みるまでは, `user-invalid$ps に合致しない。 ◎ For example, the input in the following document fragment would match :invalid as soon as the page is loaded (because it the initial value violates the max-constraint), but it won’t match :user-invalid until the user significantly interacts with the element, or attempts to submit the form it’s part of.
<form> <label> Volume: <input name='vol' type=number min=0 max=10 value=11> </label> ... </form>
`-moz-ui-invalid$ps と突き合わせて検査する。 ◎ Cross-check with :-moz-ui-invalid.
WG による解決に従って `-moz-ui-invalid$ps を `user-valid^ps として追加する。 ◎ Add :-moz-ui-valid as :user-valid per WG resolution.
`dirty^ps 疑似類 の提案を評価する必要がある。 ◎ Evaluate proposed :dirty pseudo-class
これ(および `invalid$ps, `valid$ps )が `form$e, `fieldset$e 要素にも適用し得ることを明確化する。 ◎ Clarify that this (and :invalid/:valid) can apply to form and fieldset elements.
13. 木~構造上の疑似類
`構造上の疑似類@ は、[ 文書~木の中に在るが, 他の`単体~選択子$や`結合子$では表現し得ないような,~~特別な追加~情報 ]に基づく選択を可能にするために,導入された概念である。 ◎ Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.
~text~nodeなどの非~要素~nodeは、親の中での子の位置( “付番” )の計算-時には数えられない。 この付番は 1 から開始される。 ◎ Standalone text and other non-element nodes are not counted when calculating the position of an element in the list of children of its parent. When calculating the position of an element in the list of children of its parent, the index numbering starts at 1.
`構造上の疑似類$は文書~木 内の要素のみに適用される — それらは決して,`疑似要素$に合致しては~MUST_NOT。 ◎ The structural pseudo-classes only apply to elements in the document tree; they must never match pseudo-elements.
13.1. `root^ps 疑似類
`root@ps 疑似類は、文書の根である要素を表現する。 ◎ The :root pseudo-class represents an element that is the root of the document.
例えば~DOM文書においては、 `root$ps 疑似類は `Document$I ~objの根~要素†に合致する。 ~HTMLでは、これは `html$e 要素になる(~scriptにより文書が改変されない限り)。 ◎ For example, in a DOM document, the :root pseudo-class matches the root element of the Document object. In HTML, this would be the html element (unless scripting has been used to modify the document).
【† 紛らわしいが、文書~木の根( `Document^I )ではなく,`文書~要素$ — すなわち,根の子であって, 要素である(唯一の)要素 — を意味する。 】
13.2. `empty^ps 疑似類
`empty@ps 疑似類は、内容が “空” の要素を表現する。 文書~木の語で言い換えるなら、要素が空かどうかに影響するものは,[ 要素~node( `Element$I ), および 空でない~dataを含む内容~node( `DOM$r の~text~node( `Text$I )や実体参照( `EntityReference$I )など) ]であり,[ ~comment( `Comment$I ), 処理命令( `ProcessingInstruction$I ), 他の~node ]は影響してはならない。 ◎ The :empty pseudo-class represents an element that has no children at all. 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.
【 各~node種別の括弧内の~interface名は、訳者補足。 最新の DOM4 `DOM$r では: “他の~node” は、文書( `Document$I ), 文書片( `DocumentFragment$I ), 文書型宣言( `DocumentType$I )を指す。 また、 `EntityReference$I (~DOMの文脈における実体参照)は廃止されている(置換後の状態において解釈されることになると見られる)。 】
`p:empty^S は、次の片に対しては有効な表現になる: ◎ Examples: p:empty is a valid representation of the following fragment:
<p></p>
`foo:empty^S は、次の片に対しては有効な表現にはならない: ◎ foo:empty is not a valid representation for the following fragments:
<foo>bar</foo>
<foo><bar>bla</bar></foo>
<foo>this is not <bar>:empty</bar></foo>
~WGは、[ この選択子が空白のみを包含している要素にも合致する ]ことを許容するかどうか,考慮-中にある。 その利点は、作者が空と知覚する多くの要素は,期待-どおり この選択子で選択されるようになることである: 空白は,~HTMLにおいては広く縮約-可能であり、~source~codeの整形~用に利用されるので — とりわけ,終了tagが省略された要素は、そのような空白を およそ~DOM~text内容に吸収する。 欠点は、[ この選択子が空白を除外することに依存する頁 ]が存在する場合に~Web互換性に競合する~~可能性があることと,[ 縮約されない空白は 有意な内容である ]と考える者もいるかもしれないが,選択子の挙動を `white-space$p ~propに基づいて変更することはできないことである。 論点 を見よ。 ◎ The WG is considering whether to allow elements containing only white space to match this selector. The advantage would be that—as 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—many elements which authors perceive of as empty would be selected by this selector, as they expect. The disadvantages are a potential conflict with Web-compat if there exist pages that depend on this selector excluding white space; and that one might consider uncollapsed white space to be significant content, but the selector cannot change its behavior based on the white-space property. See discussion.
13.3. `blank^ps 疑似類
`blank@ps 疑似類は、内容が 空白~処理に影響される文字 `CSS3TEXT$r のみからなる要素にも 追加で合致することを除いて, `empty$ps 疑似類と同様である。 ◎ The :blank pseudo-class is like the :empty pseudo-class, except that it additionally matches elements that only contain code points affected by whitespace processing. [CSS3TEXT]
例えば,次の要素は、改行が含まれているので, `blank$ps には合致するが `empty$ps には合致しない: ◎ For example, the following element matches :blank, but not :empty, because it contains at least one linebreak, and possibly other whitespace:
<p>
</p>
~WGは、これを改称するか,その定義を既存の `empty$ps 疑似類に落とし込むことを考慮-中にある。 論点 を見よ。 空~入力~欄~用の選択子に 関係する課題 もあり、この名前を正当に奪うかもしれない。 ◎ The WG is considering whether to rename this or file its definition under the existing :empty pseudo-class. See discussion. There’s also a related issue on a selector for empty input fields which might legitimately steal this name.
13.4. 子付番 疑似類
この節にて定義される疑似類は、要素の`同胞群$における付番 【要素はその同胞群の中で何個目に位置するか】 に基づいて選択する。 ◎ The pseudo-classes defined in this section select elements based on their index amongst their inclusive siblings.
注記: Selectors 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 と`広義同胞$の関係にある要素たちからなる,`木~順序$による集合である( ~E 自身は常に含まれる)。 単に “同胞群” と記されたときは、文書~木~内のある要素の`同胞群$を意味する。
【 この用語は、以下を簡潔に述べるために,この訳に導入している。 定義により、親が要素でない要素であっても,その`同胞群$は要素を含む(例:`文書~要素$の同胞群は、それ自身のみからなる)。 】
13.4.1. `nth-child()^ps 疑似類
疑似類~記法 `nth-child(~AnB [of ~S]? )@ps は、各 `同胞群$ごとに,その中で[ `選択子~list$ ~S に合致するもの ]のうち, ~AnBthの要素を表現する。 `of ~S^css が省略された場合の既定の ~S は、 `*|*^css になる。 ◎ The :nth-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S. If S is omitted, it defaults to *|*.
この節, および後続の節に現れる ~AnB 記法 の詳細とその解釈は、 CSS Syntax Module `CSS3SYN$r にて定義される。 ◎ The An+B notation and its interpretation are defined in CSS Syntax 3 §6 The An+B microsyntax; it represents any index i = An + B for any integer n 0 or greater.
注記: この目的においては、要素の~listは 1 から数えることに注意。 例えば、要素の最初の子は `nth-child(2n+1)$ps に合致することになる — %n ~EQ 0 のときの式は 1 に評価されるので。 ◎ Note: For these purposes, the list of elements is 1-indexed; that is, the first child of an element has index 1, and will be matched by :nth-child(2n+1), because when n=0 the expression evaluates to 1.
この選択子は、例えば,~table内の~rowを飛び飛びに選択したり, 段落の~text色を一定周期で順繰りに変えていく用途に利用できる。 ◎ For example, this selector could address every other row in a table, and could be used to alternate the color of paragraph text in a cycle of four.
: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()$ps 疑似類の詳細度は、疑似類 1 個の詳細度にその選択子~引数 ~S (もしあれば)の詳細度を足したものになる。 `選択子の詳細度の計算-法§を見よ。 したがって, `:nth-child(An+B of ~S)^S の詳細度は、 `~S:nth-child(An+B)^S と正確に同じになる — 挙動においては相違するが(下の例を見よ)。 ◎ Note: The specificity of the :nth-child() pseudo-class is the specificity of a single pseudo-class plus the specificity of its selector argument S, if any. See §16 Calculating a selector’s specificity. Thus S:nth-child(An+B) and :nth-child(An+B of S) have the exact same specificity, although they do differ in behavior (see example below).
引数に選択子も渡せば、その選択子に合致するものから, N 個目の要素を選択できる。 例えば,次の選択子は、 `important^l ~classに属する~list~itemのうちの,最初の 3 個に合致する: ◎ By passing a selector argument, we can select the Nth element that matches that selector. For example, the following selector matches the first three “important” list items, denoted by the .important class:
:nth-child(-n+3 of li.important)
これは、引数に与えた選択子を,次の様に関数の外側に出したものとは異なることに注意: ◎ Note that this is different from moving the selector outside of the function, like:
li.important:nth-child(-n+3)
この選択子は、単に最初の 3 個の~list~itemのうち, `important^l ~classに属するものを選択する。 ◎ This selector instead just selects the first three children if they also happen to be "important" list items.
引数に選択子を用いて、~tableを正しく縞模様にさせる例を示す。 ◎ Here’s another example of using the selector argument, to ensure that zebra-striping a table works correctly.
通常は,~tableの~rowを縞模様にするときは、次の様な~CSSを用いることになるだろう: ◎ Normally, to zebra-stripe a table’s rows, an author would use CSS similar to the following:
tr { background: white; } tr:nth-child(even) { background: silver; }
しかしながら,いずれかの~rowが隠されて表示されなくなった場合、それを挟む同じ背景~色の~rowが隣り合い,~patternが崩れる。 ~rowが~HTMLの `hidden^a 属性により隠されるとするなら、次の~CSSにより,どの~rowが隠されようが,背景は適正に交替され、一連の~rowは~~安定的に縞模様になる: ◎ However, if some of the rows are hidden and not displayed, this can break up the pattern, causing multiple adjacent rows to have the same background color. Assuming that rows are hidden with the [hidden] attribute in HTML, the following CSS would zebra-stripe the table rows robustly, maintaining a proper alternating background regardless of which rows are hidden:
tr { background: white; } tr:nth-child(even of :not([hidden])) { background: silver; }
13.4.2. `nth-last-child()^ps 疑似類
疑似類~記法 `nth-last-child(~AnB [of ~S]? )@ps は、各 `同胞群$ごとに,その中で[ `選択子~list$ ~S に合致するもの ]のうち,最後から~AnBthの要素を表現する。 `of ~S^css が省略された場合の既定の ~S は、 `*|*^css になる。 ◎ The :nth-last-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, counting backwards from the end. If S is omitted, it defaults to *|*.
注記: `nth-last-child()$ps 疑似類の詳細度は、 `nth-child()$ps 疑似類と同様に,定例の疑似類の詳細度に その選択子~引数 ~S の詳細度を足した結果になる。 `選択子の詳細度の計算-法§を見よ。 ◎ Note: The specificity of the :nth-last-child() pseudo-class, like the :nth-child() pseudo-class, combines the specificity of a regular pseudo-class with that of its selector argument S. See §16 Calculating a selector’s specificity. ◎ ↑↑The CSS Syntax Module [CSS3SYN] defines the An+B notation.
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 */
13.4.3. `first-child^ps 疑似類
`first-child@ps 疑似類は、各 `同胞群$ごとに,その中の最初の要素を表現する。 これは `:nth-child(1)^css と同じである。 ◎ The :first-child pseudo-class represents an element that if first among its inclusive siblings. Same as :nth-child(1).
次の選択子は、 `div^e 要素の最初の子である `p^e 要素を表現する: ◎ Examples: The following selector represents a p element that is the first child of a div element:
div > p:first-child
この選択子は、次の片の `div^e 要素の内側の `p^e 要素を表現する: ◎ This selector can represent the p inside the div of the following fragment:
<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>
が、次の片の 2 個目の `p^e 要素は表現しない: ◎ but cannot represent the second p in the following fragment:
<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>
通例的には,次の 2 つの選択子は等価になる: ◎ The following two selectors are usually equivalent:
* > 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) */
13.4.4. `last-child^ps 疑似類
`last-child@ps 疑似類は、各 `同胞群$ごとに,その中の最後の要素を表現する。 これは `:nth-last-child(1)^css と同じである。 ◎ The :last-child pseudo-class represents an element that is last among its inclusive siblings. Same as :nth-last-child(1).
次の選択子は、 “有順序~list” `ol$e 要素の最後の子である “~list~item” `li$e 要素を表現する: ◎ Example: The following selector represents a list item li that is the last child of an ordered list ol.
ol > li:last-child
13.4.5. `only-child^ps 疑似類
`only-child@ps 疑似類は、自身の他に同じ`同胞群$に属する要素は無いものを表現する — これは,[ `:first-child:last-child^css / `:nth-child(1):nth-last-child(1)^css ]と同じになるが、`詳細度$は これらより低くなる。 ◎ The :only-child pseudo-class represents an element that has no siblings. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
13.5. 有型 子付番 疑似類
この節の`疑似類$は,`子付番 疑似類§に類似するが、 同じ型の要素の集合に~~限定された中で,要素の`同胞群$における要素の付番に基づいて解決される。 ◎ The pseudo-elements 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.
13.5.1. `nth-of-type()^ps 疑似類
疑似類~記法 `nth-of-type(~AnB)@ps は、 `:nth-child(~AnB of ~S)^css に合致するものと同じ要素たちを表現する — ここで ~S は、合致させる要素に合致するような[ 名前空間 接頭辞と`型~選択子$ ]である。 例えば,~HTML `img$e 要素がこの`疑似類$に合致するかどうかを考えるとき、 ~S は `html|img^css になる( `html^css に対する適切な名前空間は`宣言-$済みとする)。 ◎ The :nth-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared).
これにより,複数の画像を交替的に `float^p ~~配置させられる: ◎ CSS example: This allows an author to alternate the position of floated images:
img:nth-of-type(2n+1) { float: right; } img:nth-of-type(2n) { float: left; }
【 仮に, `img^css を`全称~選択子$( `*^css )に置き換えたなら、各 要素~型ごとに個別に適用した結果の和集合を表現することになる。 言い換えれば, `*:nth-of-type(~AnB)^css は、[ ある`型$ ~E があって, `~E:nth-of-type(~AnB)^css に合致するもの ]すべてを表現する( `:nth-child(~AnB)^css とは異なる)。 】
注記: 要素の型が事前に既知ならば、この疑似類は,型~選択子も伴う `nth-child()$ps の利用に等価になる。 すなわち、 `img:nth-of-type(2)^S は, `*:nth-child(2 of img)^S と等価になる。 ◎ Note: If the type of the element is known ahead of time, this pseudo-class is equivalent to using :nth-child() with a type selector. That is, img:nth-of-type(2) is equivalent to *:nth-child(2 of img).
13.5.2. `nth-last-of-type()^ps 疑似類
疑似類~記法 `nth-last-of-type(~AnB)@ps は、 `:nth-last-child(~AnB of ~S)^css に合致するものと同じ要素たちを表現する — ここで ~S は、合致させる要素に合致するような[ 名前空間 接頭辞と`型~選択子$ ]である。 例えば,~HTML `img$e 要素がこの`疑似類$に合致するかどうかを考えるとき、 ~S は `html|img^css になる( `html^css に対する適切な名前空間は`宣言-$済みとする)。 ◎ The :nth-last-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-last-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared).
次の選択子により、 `body^e 要素の子であって, 最初と最後を除くすべての `h2^e 要素を表現することが可能になる: ◎ Example: To represent all h2 children of an XHTML body except the first and last, one could use the following selector:
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
この場合,`not()$ps を用いる方法もある(選択子の記述は同じ長さに): ◎ In this case, one could also use :not(), although the selector ends up being just as long:
body > h2:not(:first-of-type):not(:last-of-type)
13.5.3. `first-of-type^ps 疑似類
`first-of-type@ps 疑似類は、 `:nth-of-type(1)^css に合致するものと同じ要素たちを表現する。 ◎ The :first-of-type pseudo-class represents the same element as :nth-of-type(1).
次の選択子は、“定義~list” `dl$e の中で最初の“定義~~見出し” `dt$e を表現する。 すなわち この `dt^e は親の `dl^e 要素の子~要素~listの中で,その型の最初の要素になる: ◎ Example: The following selector represents a definition title dt inside a definition list dl, this dt being the first of its type in the list of children of its parent element.
dl dt:first-of-type
これは,次の例の最初の 2 個の `dt^e 要素に対しては有効な記述になるが、 3 個目のそれに対してはそうならない: ◎ It is a valid description for the first two dt elements in the following example but not for the third one:
<dl> <dt>gigogne</dt> <dd> <dl> <dt>fusée</dt> <dd>multistage rocket</dd> <dt>table</dt> <dd>nest of tables</dd> </dl> </dd> </dl>
13.5.4. `last-of-type^ps 疑似類
`last-of-type@ps 疑似類は、 `:nth-last-of-type(1)^css に合致するものと同じ要素たちを表現する。 ◎ The :last-of-type pseudo-class represents the same element as :nth-last-of-type(1).
次の選択子は、~tableの各 “~row” `tr$e 要素の最後の “~data~cell” `td$e 要素を表現する: ◎ Example: The following selector represents the last data cell td of a table row tr.
tr > td:last-of-type
13.5.5. `only-of-type^ps 疑似類
`only-of-type@ps 疑似類は、 `:first-of-type:last-of-type^css に合致するものと同じ要素たちを表現する。 ◎ The :only-of-type pseudo-class represents the same element as :first-of-type:last-of-type.
14. 結合子
14.1. 子孫~結合子 ( ~space )
文書~木の中で,別の要素の子孫であるような要素を記述する選択子が求められることがある(例えば “ `h1^e 要素に包含されている `em^e 要素” )。 `子孫~結合子@ は、その種の関係性を表す。 ◎ 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.
次の選択子を考える: ◎ Examples: For example, consider the following selector:
h1 em
これは、 `h1^e 要素の子孫である `em^e 要素を表現する。 それは次の片の一部分に対する有効な記述になる: ◎ It represents an em element being the descendant of an h1 element. It is a correct and valid, but partial, description of the following fragment:
<h1>この<span class="myclass">~~見出し行は <em>とても</em>重要です</span></h1>
次の選択子: ◎ The following selector:
div * p
は、 `div^e 要素の孫(子の子)またはより遠い子孫である `p^e 要素を表現する。 "`*^css" の両側にある`空白$は`全称~選択子$の一部をなさないことに注意。 この`空白$は`結合子$である — すなわち, `div^e 要素が 何らかの要素 ~E の先祖であって, かつ ~E が `p^e 要素の先祖でなければならないことを指示している。 ◎ represents a p element that is a grandchild or later descendant of a div element. Note the whitespace on either side of the "*" is not part of the universal selector; the whitespace is a combinator indicating that the div must be the ancestor of some element, and that that element must be an ancestor of the p.\
`子孫~結合子$と`属性~選択子§を組合せる次の選択子は、 `href^a 属性が設定されていて, かつ `div^e 要素の内側にある `p^e 要素の内側にあるような要素を表現する: ◎ The following selector, which combines descendant combinators and attribute selectors, represents an element that (1) has the href attribute set and (2) is inside a p that is itself inside a div:
div p *[`href^a]
14.2. 子~結合子 ( `>^css )
`子~結合子@ は、要素と要素の親子関係を記述し, 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^e 要素の子であるような `p^e 要素を表現する: ◎ Examples: The following selector represents a p element that is child of body:
body > p
`子孫~結合子$と`子~結合子$を組合せる用例: ◎ The following example combines descendant combinators and child combinators.
div ol>li p
これは `li$e 要素の子孫であるような `p$e 要素を表現するが, `li$e 要素は `ol$e 要素の子でなければならず, `ol$e 要素は `div$e 要素の子孫で~MUST。 結合子 "`>^css" の前後の`空白$が省略されていることに注意。 ◎ It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the ">" combinator has been left out.
要素の最初の子を選択するような類いのものについては、上述の`構造上の疑似類§ 節を見よ。 ◎ For information on selecting the first child of an element, please see the section on the :first-child pseudo-class above.
14.3. 次同胞~結合子 ( `+^css )
`次同胞~結合子@ は、 2 つの`合体~選択子$を区切る “正符号” — `002B^U0 `+^css — で記される。 この 2 つの`合体~選択子$で表現される要素は、文書~木の中で同じ親を共有し, 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^e 要素の直後に位置する `p^e 要素を表現する: ◎ Examples: The following selector represents a p element immediately following a math element:
math + p
次の選択子には、`属性~選択子$が追加されている — `h1^e 要素は `opener^l ~classに属するとする拘束も追加されている — ことを除いて,前の例のものと概念的に同様になる: ◎ The following selector is conceptually similar to the one in the previous example, except that it adds an attribute selector — it adds a constraint to the h1 element, that it must have class="opener":
h1.opener + h2
14.4. 後続同胞~結合子 ( `~^css )
`後続同胞~結合子@ は、 2 つの`合体~選択子$を区切る “~tilde” — `007E^U0 `~^css — で記される。 この 2 つの`合体~選択子$で表現される要素は、文書~木の中で同じ親を共有し, 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^e 要素に後続する `pre^e 要素を表現する。 それは次の片の一部分に対する有効な記述になる: ◎ represents a pre element following an h1. It is a correct and valid, but partial, description of:
<h1>~~関数 a の~~定義</h1> <p>この表のすべての図には Function a(x) を~~適用すること。</p> <pre>function a(x) = 12x/13.5</pre>
15. 格子構造~選択子
2 次元~格子の~cellの(その~rowと~colへの)二重の所属関係は、階層的~markup言語における親子関係では,一方のみしか 表現し得ず、もう一方の所属関係は,文書~言語の意味論において明示的/暗黙的に定義され~MUST。 2 つの最も共通的な階層的~markup言語である~HTMLと DocBook の両者とも,~markupは~row主導であり(すなわち,~rowへの所属関係が階層で表現される)、~colについては言外に与えられ~MUST。 その種の~colへの言外の所属関係を表現し得るようにするため、 `~column結合子$ および `nth-col()$ps , `nth-last-col()$ps 疑似類が定義される。 ~col主導の文書~言語においては、これらの疑似類は,~rowへの所属関係に合致する。 ◎ The double-association of a cell in a 2D grid (to its row and column) cannot be represented by parentage in a hierarchical markup language. Only one of those associations can be represented hierarchically: the other must be explicitly or implicitly defined in the document language semantics. In both HTML and DocBook, two of the most common hierarchical markup languages, the markup is row-primary (that is, the row associations are represented hierarchically); the columns must be implied. To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined. In a column-primary format, these pseudo-classes match against row associations instead.
15.1. ~column結合子
`~column結合子@ は、~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.
次の例では,~cell C, E, G に~style( `background: gray^S, 等々)が適用される。 ◎ The following example makes cells C, E, and G gray.
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>
15.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.
15.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.
16. 選択子の詳細度の計算-法
選択子(`複体~選択子$)の `詳細度@ は、次の様にして,与えられた要素に対して計算される: ◎ A selector’s specificity is calculated for a given element as follows:
- 選択子の中の `~ID選択子$の個数を数える( = %A ) ◎ count the number of ID selectors in the selector (= A)
- 選択子の中の[ `~class選択子$, `属性~選択子$, `疑似類§ ]の個数を数える( = %B ) ◎ count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
- 選択子の中の[ `型~選択子$, `疑似要素$ ]の個数を数える( = %C ) ◎ count the number of type selectors and pseudo-elements in the selector (= C)
- `全称~選択子$は無視する ◎ ignore the universal selector
`選択子~list$の詳細度は、どう合致したかに依存する: 所与の[ `選択子~list$の照合~処理 ]において,効果を~~発揮する詳細度は、~list内の合致した`複体~選択子$の詳細度のうち,最高のそれになる。 ◎ If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.
疑似類のうち少数のものは、他の選択子~用の “評価~文脈” を供し、詳細度は,その内容, および どう合致したかにより定義される: ◎ A few pseudo-classes provide “evaluation contexts” for other selectors, and so have their specificity defined by their contents and how they match:
課題 1027 も見よ。 【下に挙げるような,選択子~listを引数にとる疑似類が複数個 含まれている場合に、それぞれの詳細度を独立に評価できない場合もある問題がある。】 ◎ See also issue 1027.
-
[ `matches()$ps / `has()$ps ]疑似類の詳細度は、その選択子~list引数 ~S に適用-可能な詳細度に置換される。 (したがって,引数が合体~選択子のみを包含する場合、全部的な選択子の詳細度は, `matches()$ps を外して,すべての組合せを全部的に展開する†ことに等価になる。 全部的に一般化された詳細度は、引数~内の合致した選択子の詳細度のうち,最高のそれになる。 `has()$ps に対する~comma区切りの引数の挙動も相似的になる。) ◎ The specificity of a :matches() or :has() pseudo-class is replaced by the specificity applicable to its selector list argument. (When :matches() contains only compound selectors, the full selector’s specificity is thus equivalent to expanding out all the combinations in full, without :matches(); fully generalized, the specificity of :matches() is the specificity of the most specific selector within it that matches. The behavior for comma-separated arguments to :has() is analogous.)
【† 例えば[ `X > :matches( Y1, Y2 ) > Z^S ]のような形なら、[ `X > Y1 > Z, X > Y2 > Z^S ]のように,全体として選択子~listの形に展開する。 】
- 相似的に,選択子[ `nth-child()$ps / `nth-last-child()$ps ]の詳細度は、疑似類~自身の詳細度( 1 個の疑似類~選択子として数える)に,その選択子~list引数 ~S (もしあれば)の詳細度を足した結果になる。 ◎ Analogously, the specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of its selector list argument (if any).
- `not()$ps 疑似類の詳細度は、その選択子~list引数 ~S 内の合致した選択子の詳細度のうち,最高のそれに置換される。 ◎ The specificity of a :not() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.
- `something()$ps 疑似類の詳細度は、 0 に置換される。 ◎ The specificity of a :something() pseudo-class is replaced by zero.
例えば: ◎ For example:
-
`:matches(em, #foo)^S の詳細度は:
- `em^e に合致したときは,`型~選択子$に対するときと同様に ( 0,0,1 ) になる。
- `em id=foo^e に合致したときは、`~ID選択子$に対するときと同様に ( 1,0,0 ) になる。
- `div:something(em, #foo#bar#baz) ^S の詳細度は、 `div^css 以外は寄与しないので, (0,0,1) になる。 ◎ div:something(em, #foo#bar#baz) has a specificity of (0,0,1): only the div contributes to selector specificity.
-
`:nth-child(even of li, .item)^S の詳細度は:
- `li^e に合致したときは、[ `型~選択子$ + 1 個の疑似類 ]に対するときと同様に ( 0,1,1 ) になる。
- `li class=item id=foo^e に合致したときは、[ `~class選択子$ + 1 個の疑似類 ]に対するときと同様に ( 0,2,0 ) になる。
- `:not(em, #foo)^S の詳細度は、どの要素に合致しようが,`~ID選択子$に対するときと同様に ( 1,0,0 ) になる。 ◎ :not(em, #foo) has a specificity of (1,0,0)--like an ID selector--whenever it matches any element.
詳細度の比較では、 3 成分が順に(~~辞書式に)比較される: %A 値が大きい方の詳細度がより高く、 %A 値が等しければ %B 値が大きい方の詳細度がより高く、 %B 値も等しければ %C 値が大きい方の詳細度がより高く、 すべての値が等しければ 2 つの詳細度は等しい。 ◎ Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger C value is more specific; if all the values are tied, the two specificities are equal.
記憶域に限りがあるときは、実装は %A, %B, %C の大きさを制限を課してよい。 その場合、その制限-を超えた値は,その制限-内に切り詰められ~MUST。 ◎ Due to storage limitations, implementations may have limitations on the size of A, B, or C. If so, values higher than the limit must be clamped to that limit, and not overflow.
* /* 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^a=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 :matches(.bar, #baz) /*
合致する要素に依存して, (a, b, c) =
(0, 2, 0) または (1, 1, 0)
のいずれかになる。
◎
Either a=1 b=1 c=0
or a=0 b=2 c=0, depending
on the element being matched.
*/
注記: 同じ`単体~選択子$の繰り返しは許容され、詳細度を増大させる。 【`選択対象$は変えずに詳細度を高くできる。例えば `#id#id^css 】 ◎ Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.
注記: ~HTML `style^a 属性にて指定される~styleの詳細度については、 `CSSSTYLEATTR$r の ~CSS~style属性 にて述べられている。 ◎ Note: The specificity of the styles specified in an HTML style attribute is described in CSS Style Attributes. [CSSSTYLEATTR]
17. 文法
選択子は、以下の文法に則って 構文解析される: ◎ Selectors are parsed according to the following grammar:
`selector-list@t 【`選択子~list$】 = `complex-selector-list$t `complex-selector-list@t 【`複体~選択子$`の~list$】 = `complex-selector$t# `compound-selector-list@t 【`合体~選択子$`の~list$】 = `compound-selector$t# `simple-selector-list@t 【`単体~選択子$`の~list$】 = `simple-selector$t# `relative-selector-list@t 【`相対~選択子$`の~list$】 = `relative-selector$t# `complex-selector@t 【`複体~選択子$】 = `compound-selector$t [ `combinator$t? `compound-selector$t ]* `relative-selector@t 【`相対~選択子$】 = `combinator$t? `complex-selector$t `compound-selector@t 【`合体~選択子$】 = [ `type-selector$t? `subclass-selector$t* [ `pseudo-element-selector$t `pseudo-class-selector$t* ]* ]! `simple-selector@t 【`単体~選択子$】 = `type-selector$t | `subclass-selector$t `combinator@t 【`結合子$(`子孫~結合子$以外)】 = '>' | '+' | '~' | '||' `type-selector@t 【`型~選択子$】 = `wq-name$t | `ns-prefix$t? '*' `ns-prefix@t 【`名前空間$】 = [ `ident-token$t | '*' ]? '|' `wq-name@t = `ns-prefix$t? `ident-token$t `subclass-selector@t = `id-selector$t | `class-selector$t | `attribute-selector$t | `pseudo-class-selector$t `id-selector@t 【`~ID選択子$】 = `hash-token$t `class-selector@t 【`~class選択子$】 = '.' `ident-token$t `attribute-selector@t 【`属性~選択子$】 = '[' `wq-name$t ']' | '[' `wq-name$t `attr-matcher$t [ `string-token$t | `ident-token$t ] `attr-modifier$t? ']' `attr-matcher@t = [ '~' | '|' | '^' | '$' | '*' ]? '=' `attr-modifier@t 【`属性~値の文字大小区別§】 = i `pseudo-class-selector@t 【`疑似類$】 = ':' `ident-token$t | ':' `function-token$t `any-value$t ')' `pseudo-element-selector@t 【`疑似要素$】 = ':' `pseudo-class-selector$t
上の文法を解釈するときには、次の規則が適用される: ◎ In interpreting the above grammar, the following rules apply:
-
次に挙げる箇所を除き、空白は禁止される: ◎ White space is forbidden between tokens except:
- (量指定子 `#^prod による,)~commaの前後 ◎ Around commas (denoted with the # multiplier)
- `combinator$t 自身, またはその前後。 ◎ Around or in place of a <combinator>
- 関数形[ `pseudo-class-selector$t / `pseudo-element-selector$t ]における,丸括弧と引数との合間。 ◎ Between the parentheses and argument of a functional <pseudo-class-selector> or <pseudo-element-selector>.
- ~Level 2 の`疑似要素$( `before$pe, `after$pe, `first-line$pe, `first-letter$pe )は、旧来の理由から[ 先頭の~colonが 1 個だけの `pseudo-class-selector$t 文法 ]を利用して表現されても~MAY。 ◎ The four Level 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter) may, for legacy reasons, be represented using the <pseudo-class-selector> grammar, with only a single ":" character at their start.
- `id-selector$t 内の `hash-token$t の値は、`識別子$で~MUST。 ◎ In <id-selector>, the <hash-token>’s value must be an identifier.
注記: 選択子は、様々な[ より特有の, 構文上の拘束 ]の対象にもなる — 上述の文法を固守することは必要とされるが、選択子が有効と見なされるには不足である。 選択子を構文解析する際の追加の規則は、`無効な選択子と~errorの取扱い§を見よ。 ◎ Note: A selector is also subject to a variety of more specific syntactic constraints, and adherence to the grammar above is necessary but not sufficient for the selector to be considered valid. See §3.9 Invalid Selectors and Error Handling for additional rules for parsing selectors.
注記: 上の文法は、 `complex-selector$t 内の 2 個の `compound-selector$t の合間の結合子は、省略可能と言明している。 その目的は、文法上に限られる — `~CSS値~定義~構文$による,空白の緩い扱いは、空白に なれるような文法記号を指示し難くしている。 `結合子$の “省略” は、実際には,ちょうど`子孫~結合子$を指定することにあたる。 ◎ Note: The grammar above states that a combinator is optional between two <compound-selector>s in a <complex-selector>. This is only for grammatical purposes, as the CSS Value Definition Syntax’s lax treatment of whitespace makes it difficult to indicate that a grammar term can be whitespace. "Omitting" a combinator is actually just specifying the descendant combinator.
注記: 一般に, `pseudo-element-selector$t が妥当になるのは、 `complex-selector$t 内の最後の `compound-selector$t の終端に置かれた場合に限られる。 しかしながら,一部の状況下では、他の[ `pseudo-element-selector$t / `pseudo-class-selector$t ]たちも後続し得る — が、そうなり得るかどうかは,各 事例ごとに指定される(例えば `利用者~動作 疑似類§は,どの`疑似要素$の後にも許容され、 木に留まる疑似要素 は, `slotted()$pe 疑似要素の後にも許容される)。 ◎ Note: In general, a <pseudo-element-selector> is only valid if placed at the end of the last <compound-selector> in a <complex-selector>. In some circumstances, however, it can be followed by more <pseudo-element-selector>s or <pseudo-class-selector>s; but these are specified on a case-by-case basis. (For example, the user action pseudo-classes are allowed after any pseudo-element, and the tree-abiding pseudo-elements are allowed after the ::slotted() pseudo-element)
18. ~API~hook
この節では,~Selectorsの概念を利用する仕様の策定に便宜を図るため、他の仕様から呼び出せる,いくつかの~API~hookを定義する。 ◎ To aid in the writing of specs that use Selectors concepts, this section defines several API hooks that can be invoked by other specifications.
これらは、まだ必要とされているのか? 今や、より厳格な,`合致-$ , および`無効な選択子$の定義がある。 仕様~間で協調するのは,述語より名詞を通す方が ずっと容易であり、また, `querySelector()^c から返される要素たちの正確な順序の様な詳細は,~Selectorsより~DOM仕様にて定義される方が~~適切に見受けられる。 ◎ Are these still necessary now that we have more rigorous definitions for match and invalid selector? Nouns are a lot easier to coordinate across specification than predicates, and details like the exact order of elements returned from querySelector seem to make more sense being defined in the DOM specification than in Selectors.
18.1. 選択子の構文解析-法
`選択子として構文解析-@ するときは、所与の文字列 %~source に対し,[ `複体~選択子$の~list, または `失敗^i ]を返す: ◎ This section defines how to parse a selector from a string source. It returns either a complex selector list, or failure.
- ~IF[ %~source は `selector-list$t の文法に合致していない ] ⇒ ~RET `失敗^i — %~source は`無効な選択子$である ◎ Let selector be the result of parsing source as a <selector-list>. If it does not match the grammar, it’s an invalid selector; return failure.
- %選択子 ~LET %~source を `selector-list$t として構文解析した結果 ◎ ↑
- ~IF[ %選択子 は他の何らかの理由で`無効な選択子$である(例:`未宣言$の名前空間 接頭辞を包含している) ] ⇒ ~RET `失敗^i ◎ If selector is an invalid selector for any other reason (such as, for example, containing an undeclared namespace prefix), return failure.
- ~RET %選択子 ◎ Otherwise, return selector.
18.2. 相対~選択子の構文解析-法
`相対~選択子として構文解析-@ するときは、所与の ( 文字列 %~source, `~scope_ps要素$ %refs ) に対し,[ `複体~選択子$の~list, または `失敗^i ]を返す。 ◎ This section defines how to parse a relative selector from a string source, against :scope elements refs. It returns either a complex selector list, or failure.
- ~IF[ %~source は `relative-selector-list$t の文法に合致していない ] ⇒ ~RET `失敗^i ◎ ↓
- %選択子 ~LET %~source を `relative-selector-list$t として構文解析した結果 ◎ Let selector be the result of parsing source as a <relative-selector-list>. If it does not match the grammar, return failure.
- ~IF[ %選択子 内に~UAが認識できない単体~選択子がある ]~OR[ %選択子 は何らかの仕方で妥当でない(例えば,`未宣言$の名前空間 接頭辞が含まれている) ] ⇒ ~RET `失敗^i ◎ Otherwise, if any simple selectors in selector are not recognized by the user agent, or selector is otherwise invalid in some way (such as, for example, containing an undeclared namespace prefix), return failure.
- ~RET %refs を`~scope_ps要素$に用いて, %選択子 を`絶対化$した結果 ◎ Otherwise, absolutize selector with refs as the :scope elements. ◎ Return selector.
18.3. 要素に対し選択子を照合する
`要素に対し選択子を照合-@ するときは、所与の: ◎ This section defines how to match a selector against an element.
- %選択子 — `選択子~list$ ◎ APIs using this algorithm must provide a selector and\
- %要素 ◎ an element.
-
`scope$ps 疑似類を解決するための, `~scope_ps要素$の集合(省略時は空~集合) ◎ Callers may optionally provide: ◎ a set of :scope elements, for resolving the :scope pseudo-class against. If not specified, the set defaults to being empty.
`scope$ps の定義に合致するよう,省略時の既定は 根~要素にするべきか? ◎ Should it instead default to the root element, to match the definition of :scope?
%選択子 が`相対~選択子$である場合、この集合は,空であっては~MUST_NOT。 ◎ If the selector is a relative selector, the set of :scope elements must not be empty.
【 原文の~algoには、この`~scope_ps要素$の集合がどう適用されるか,(明示的には)何も述べられていない。 (暗黙的に)`~scope_ps要素$の規則に従うと見られるが。 以下の各~節の~algoも同様。 】
に対し, `成功^i または `失敗^i を返す: ◎ This algorithm returns either success or failure.
- %選択子 内の ~EACH( `複体~選択子$ %複体 ) に対し ⇒ ~IF[ ( %複体, %要素 ) を与える下で,`要素に対し複体~選択子を照合-$した結果 ~EQ `成功^i ] ⇒ ~RET `成功^i ◎ For each complex selector in the given selector (which is taken to be a list of complex selectors), match the complex selector against element, as described in the following paragraph. If the matching returns success for any complex selector, then the algorithm return success; otherwise it returns failure.
- ~RET `失敗^i
`要素に対し複体~選択子を照合-@ するときは、所与の ( `複体~選択子$ %複体, %要素 ) に対し,次を走らせた結果を返す: ◎ To match a complex selector against an element, process it compound selector at a time, in right-to-left order. This process is defined recursively as follows:
- %複体 の末尾の(最も右の)`合体~選択子$ 内の ~EACH( `単体~選択子$ %単体 ) に対し ⇒ ~IF[ %単体 は %要素 に合致しない ] ⇒ ~RET `失敗^i ◎ If any simple selectors in the rightmost compound selector does not match the element, return failure.
- ~IF[ %複体 は 1 個の`合体~選択子$のみからなる ] ⇒ ~RET `成功^i ◎ Otherwise, if there is only one compound selector in the complex selector, return success.
-
%要素たち ~LET %複体 内の最後の`結合子$により %要素 に関係し得るような,可能なすべての要素からなる集合
【 例えば`子孫~結合子$の場合、 %要素 の先祖すべてからなる集合になるであろう。 】
◎ Otherwise, consider all possible elements that could be related to this element by the rightmost combinator.\ - %複体 ~SET %複体 から[ 末尾の`合体~選択子$, 最後の`結合子$ ]を除去した結果の`複体~選択子$ ◎ If the operation of matching the selector consisting of this selector with the rightmost compound selector and rightmost combinator removed\
- %要素たち 内の~EACH( %E ) に対し ⇒ ~IF[ ( %複体, %E ) を与える下で,`要素に対し複体~選択子を照合-$した結果 ~EQ `成功^i ] ⇒ ~RET `成功^i ◎ against any one of these elements returns success, then return success. Otherwise, return failure.
- ~RET `失敗^i
18.4. 疑似要素に対し選択子を照合する
`疑似要素に対し選択子を照合-@ するときは、所与の: ◎ This section defines how to match a selector against a pseudo-element.
- %選択子 — `選択子~list$ ◎ APIs using this algorithm must provide a selector and\
- %疑似要素 — `疑似要素$ ◎ a pseudo-element.\
- %他の引数たち (省略可) — `要素に対し選択子を照合-$する~algoに述べたものと同じ引数 ◎ They may optionally provide the same things they may optionally provide to the algorithm to match a selector against an element.
に対し, `成功^i または `失敗^i を返す: ◎ This algorithm returns success or failure.
-
%選択子 内の~EACH( `複体~選択子$ %複体 ) に対し: ◎ For each complex selector in the given selector, if both:
- ~IF[ %複体 の末尾の`単体~選択子$は %疑似要素 に合致しない ] ⇒ ~CONTINUE ◎ the rightmost simple selector in the complex selector matches pseudo-element, and
- %複体 ~SET %複体 から末尾の`単体~選択子$を除去した結果 ◎ ↓
- ~IF[ ( %複体, %疑似要素 の`出自の要素$, %他の引数たち ) を与える下で,`要素に対し複体~選択子を照合-$した結果 ~EQ `成功^i ] ⇒ ~RET `成功^i ◎ the result of running match a complex selector against an element on the remainder of the complex selector (with just the rightmost simple selector of its rightmost complex selector removed), pseudo-element’s corresponding element, and any optional parameters provided to this algorithm returns success, ◎ then return success.
- ~RET `失敗^i ◎ Otherwise (that is, if this doesn’t happen for any of the complex selectors in selector), return failure.
18.5. 木に対し選択子を照合する
`木に対し選択子を照合-@ するときは、所与の: ◎ This section defines how to match a selector against a tree. ◎ APIs using this algorithm must provide\
- %選択子 — `選択子~list$ ◎ a selector, and\
- %根~要素たち — %選択子 を照合する対象とされる, 1 個~以上の`木$【部分木】の根~要素からなる集合。 %根~要素たち 内のすべての要素の`根$は,同じで~MUST。 ◎ one or more root elements indicating the trees that will be searched by the selector. All of the root elements must share the same root, or else calling this algorithm is invalid. ◎ They may optionally provide:
-
%視野根 (省略時は ε ) — %選択子 は視野付きであることを指示する`視野根$。 省略時には、視野は絞られないことになる。 ◎ A scoping root indicating the selector is scoped. If not specified, the selector defaults to being unscoped.
これは今や %根~要素たち と~~重なって冗長である。 ◎ This is now redundant with the root elements.
-
`scope$ps 疑似類に合致するものとされる`~scope_ps要素$の集合。 省略時の既定は、[ %選択子 が`視野付き選択子$であるならば `視野根$ / 他の場合は %根~要素たち ]。 ◎ A set of :scope elements, which will match the :scope pseudo-class. If not specified, then if the selector is a scoped selector, the set of :scope elements default to the scoping root; otherwise, it defaults to the root elements.
注記: %選択子 が`視野付き$の場合、視野根は自動的に`~scope_ps要素$とされるので、異なる結果が欲されない限り,明示的に供される必要はない。 ◎ Note: Note that if the selector is scoped, the scoping root is automatically taken as the :scope element, so it doesn’t have to be provided explicitly unless a different result is desired.
-
合致し得る`疑似要素$の種類(省略時は、すべての疑似要素)。 ◎ Which pseudo-elements are allowed to show up in the match list. If not specified, this defaults to allowing all pseudo-elements.
本当に この様に取扱われる疑似要素は `before$pe, `after$pe に限られる。 ◎ Only the ::before and ::after pseudo-elements are really handled in any way remotely like this.
要素たちからなる~listを返す(空にもなり得る): ◎ This algorithm returns a (possibly empty) list of elements.
- %候補~要素たち ~LET %根~要素たち とそれらの子孫~要素すべてからなる,`~shadowも含む木~順序$による~list — 他が指定されない限り。 ◎ Start with a list of candidate elements, which are the the root elements and all of their descendant elements, sorted in shadow-including tree order, unless otherwise specified.
- ~IF[ %視野根 ~NEQ ε ] ⇒ %候補~要素たち から %視野根 の`子孫$でない要素すべてを除去する ◎ If an optional scoping root was provided, then remove from the candidate elements any elements that are not descendants of the scoping root.
- %結果~list ~LET 空~list ◎ Initialize the selector match list to empty.
-
%候補~要素たち 内の~EACH( %要素 ) に対し: ◎ For each element in the set of candidate elements:
- ( %要素, %選択子 ) を与える下で,`要素に対し選択子を照合-$した結果 ~EQ `成功^i ⇒ %結果~list に %要素 を追加する ◎ If the result of match a selector against an element for element and selector is success, add element to the selector match list.
-
%要素 を`出自の要素$とする疑似要素のうち,合致し得るとされる ~EACH( %疑似要素 ) に対し ⇒ ~IF[ ( %疑似要素, %選択子 ) を与える下で,`疑似要素に対し選択子を照合-$した結果 ~EQ `成功^i ] ⇒ %結果~list に %疑似要素 を追加する ◎ For each possible pseudo-element associated with element that is one of the pseudo-elements allowed to show up in the match list, if the result of match a selector against a pseudo-element for the pseudo-element and selector is success, add the pseudo-element to the selector match list.
%結果~list における,疑似要素と他の要素との順序が定義されていない。 今の所,この情報を公開する文脈はないが、最終的には,何かが公開される前に決めておく必要がある。 ◎ The relative position of pseudo-elements in selector match list is undefined. There’s not yet a context that exposes this information, but we need to decide on something eventually, before something is exposed.
19. ~source文書~dataから要素~木へ対応付けるための手引き
~INFORMATIVE~DOMが述べる要素の木~構造は強力かつ有用である一方で、木~構造に基づく~dataを記述する,どの言語を~model化するにも(あるいは~graph構造に基づくものでも,相応しい解釈の下で)十分に汎用的である。 ◎ The element tree structure described by the DOM is powerful and useful, but generic enough to model pretty much any language that describes tree-based data (or even graph-based, with a suitable interpretation).
~HTMLの様な一部の言語は、資源から~DOM~objを生産するための手順が,すでに きちんと定義されている。 そうでない言語による文書に~Selectorsを適用するためには、その種の手順が,その言語に定義され~MUST。 ◎ Some languages, like HTML, already have well-defined procedures for producing a DOM object from a resource. If a given language does not, such a procedure must be defined in order for Selectors to apply to documents in that language.
文書~言語は、最低限,何が~DOMの “要素” の概念に対応するかを定義し~MUST。 ◎ At minimum, the document language must define what maps to the DOM concept of an "element".
首な,~node間の一対多の関係性 — 木~構造における親から子への, あるいは ~graph構造における~nodeからその近隣への 関係性 — が、要素の子~nodeとして反映されるべきである。 ◎ The primary one-to-many relationship between nodes—parent/child in tree-based structures, element/neighbors in graph-based structures—should be reflected as the child nodes of an element.
可能なら、要素の他の特能( `feature^en )も, ~DOMにおける同じ特能 に似た役割を担う何かに対応付けるべきである: ◎ Other features of the element should be mapped to something that serves a similar purpose to the same feature in DOM:
- 型 ◎ type
-
文書~言語が、その要素たちを異なる要素~groupに判別し得るような~~基本的な~~概念( `notion^en )として,何らかの “型” を備えているならば、それが, “型” 特能として反映されるべきである。 ◎ If the elements in the document language have some notion of "type" as a basic distinguisher between different groups of elements, it should be reflected as the "type" feature.
この “型” を, “~~基本的な” 名前と, それらの名前をより高次の “名前空間” ~groupに分離し得るならば、後者は “名前空間” 特能として反映されるべきである。 他の場合、要素は “名前空間” 特能を持つべきでなく,名前~全体が “型” 特能として反映されるべきである。 ◎ If this "type" can be separated into a "basic" name and a "namespace" that groups names into higher-level groups, the latter should be reflected as the "namespace" feature. Otherwise, the element shouldn’t have a "namespace" feature, and the entire name should be reflected as the "type" feature.
- ~ID ◎ id
-
要素の何らかの側面が,文書~全体に渡り一意な識別子として~~機能する場合、それが, “~ID” 特能に対応付けられべきである。 ◎ If some aspect of the element functions as a unique identifier across the document, it should be mapped to the "id" feature.
注記: ~HTMLにおいては、要素が持ち得る~IDは 1 個に限られているが,一般にはそのように制約されるべきではない。 ~IDの重要な性質は、各~IDが単独の要素に結付けられることであり、単独の要素は,複数の~IDを妥当に持ち得る。 ◎ Note: While HTML only allows an element to have a single ID, this should not be taken as a general restriction. The important quality of an ID is that each ID should be associated with a single element; a single element can validly have multiple IDs.
- ~classと属性 ◎ classes and attributes
- 要素を識別するときに有用になる側面ではあるが,一般に,文書の中の一意な要素にはならないものは、[ “~label” (それ自体が文字列になるもの)/ “~prop” (名前と値の対) ]のいずれに等価になるかに依存して,[ “~class” / “属性” ]特能に対応付けられるべきである。 ◎ Aspects of the element that are useful for identifying the element, but are not generally unique to elements within a document, should be mapped to the "class" or "attribute" features depending on if they’re something equivalent to a "label" (a string by itself) or a "property" (a name/value pair)
- 疑似類と疑似要素 ◎ pseudo-classes and pseudo-attributes
- 疑似類に合致する, あるいは 疑似要素を持つような要素は、明示的に定義され~MUST。 ◎ If any elements match any pseudo-classes or have any pseudo-elements, that must be explicitly defined.
- `has()$ps や `matches()$ps の様に,一部の疑似類は 構文論的 なので、常に働くべきであり、それについて どこかで指示される必要がある。 構造上の疑似類は、子~listが順序を有するならば,常に働くであろう。 ◎ Some pseudo-classes are *syntactical*, like :has() and :matches(), and thus should always work. Need to indicate that somewhere. Probably the structural pseudos always work whenever the child list is ordered.
例えば、 JSONSelect は,~JSON文書から情報を抽出するために選択子を利用する~libraryである。 ◎ For example, JSONSelect is a library that uses selectors to extract information from JSON documents.
- ~JSON文書の各[ array, object, boolean, string, number, null ]が,木~構造を成す “要素” になる。 array / object 要素は,その内容を子として持つ。 ◎ The "elements" of the JSON document are each array, object, boolean, string, number, or null. The array and object elements have their contents as children.
- 各~要素の型はその JS 型~名: `array^l, `object^l, 等々になる。 ◎ Each element’s type is its JS type name: "array", "object", etc.
- object の子は、その key を~classとして持つ。 ◎ Children of an object have their key as a class.
- array の子は `first-child$ps, `nth-child()$ps, 等々の疑似類に合致する。 ◎ Children of an array match the :first-child, :nth-child(), etc pseudo-classes.
- 根 object は `root$ps に合致する。 ◎ The root object matches :root.
- 特定0の[ 値をとる, あるいは 部分文字列を包含する ]ような boolean/number/string 要素に合致させるための `val()^ps, `contains()^ps 疑似類も追加で定義する。 ◎ It additionally defines :val() and :contains() pseudo-classes, for matching boolean/number/string elements with a particular value or which contain a particular substring.
この構造は、選択子による,~JSON文書に対する強力で簡潔な照会-法を与えるに足るものになる。 ◎ This structure is sufficient to allow powerful, compact querying of JSON documents with selectors.
20. 変更点
2 May 2013 Working Draft からの有意な変更点は: ◎ Significant changes since the 2 May 2013 Working Draft include:
- 次の疑似類を追加した ⇒# `target-within$ps, `focus-within$ps, `focus-visible$ps, `playing$ps, `paused$ps ◎ Added the :target-within, :focus-within, :focus-visible, :playing, and :paused pseudo-classes.
- `matches$ps の “詳細度 0 版” を追加した。 その名前 `something()$ps は、まだ仮のものだが。 ◎ Added a zero-specificity :matches()-type pseudo-class, with name TBD.
- 対象指示子 `!^css ( `subject indicator^en )の特色機能を `has()$ps に置換した。 ◎ Replaced subject indicator (!) feature with :has().
- 選択子[ `nth-match()^ps / `nth-last-match()^ps ]を[ `:nth-child(… of ~S)^S / `:nth-last-child(… of ~S)^S ]に置換した。 ◎ Replaced the :nth-match() and :nth-last-match() selectors with :nth-child(… of selector) and :nth-last-child(… of selector).
- 次の疑似類を `drop()$ps に変更した ⇒# `active-drop-target^ps, `valid-drop-target^ps, `invalid-drop-target^ps ◎ Changed the :active-drop-target, :valid-drop-target, :invalid-drop-target with :drop().
- [ 空/空白のみ ]を内容とする要素に合致する選択子についての論点を素描した( `blank$ps )。 ( open 課題 を見よ。) ◎ Sketched out an empty-or-whitespace-only selector for discussion (:blank). (See open issue.)
- `user-error^ps を `user-invalid$ps に改称した。 ( 論点 を見よ。) ◎ Renamed :user-error to :user-invalid. (See Discussion)
- `nth-column()^ps / `nth-last-column()^ps を `nth-col()$ps / `nth-last-col()$ps に改称した — 【将来に定義され得る】 `column^pe 疑似要素との混同を避けるため。 ◎ Renamed :nth-column()/:nth-last-column() to :nth-col()/:nth-last-col() to avoid naming confusion with a potential ::column pseudo-class.
- 関数形fでない `local-link$ps 疑似類は、素片も織り込むよう変更した。 ◎ Changed the non-functional form of the :local-link pseudo-class to account for fragment URLs.
- 関心が欠如しているので、関数形fの `local-link()^ps 疑似類と参照~結合子は,除去した。 ◎ Removed the functional form of the :local-link() pseudo-class and reference combinator for lack of interest.
- 選択子の文法を`~CSS値~定義~構文$を用いて書き直した。 ◎ Rewrote selectors grammar using the CSS Value Definition Syntax.
- `視野付き選択子$から`相対~選択子$を~~分離した。 これらは独立に呼出され得る,異なる概念なので。 ◎ Split out relative selectors from scoped selectors, as these are different concepts that can be independently invoked.
-
~AnB 小構文の定義を CSS Syntax 仕様に移動した。 ◎ Moved definition of <An+B> microsyntax to CSS Syntax.
意味論的な定義については,おそらく ここに戻されるべきである。 ◎ Semantic definition should probably move back here.
-
次の新たな節を追加した: ◎ Added new sections:
-
`~data~model§ 節。 ◎ §3.2 Data Model
~XML用の木を定義する必要がある。 ◎ Need to define tree for XML.
-
`~API~hook§ 節。 ◎ §18 API Hooks
この仕様の以前の~versionは、 選択子の評価-法 節を定義していたが、その節はもう無い。 その節を参照している仕様は、`木に対し選択子を照合-$する~algoを参照するべきである。 ◎ Note that earlier versions of this section defined a section on evaluating a selector, but that section is no longer present. Specifications referencing that section should instead reference the algorithm to match a selector against a tree.
-
- `matches()$ps, `not()$ps の中の結合子に対する制約を除去した。 論点 を見よ。 ◎ Removed restriction on combinators within :matches() and :not(); see discussion.
- `選択子~list$の`詳細度$を定義した。 (Why?) ◎ Defined specificity of a selector list. (Why?)
- `lang()$ps 値は、~asteriskを孕んでいる場合には,引用符で括ることが要求される。 引用符が不要になるのは、~CSS識別子になる言語~codeに限られる。 ◎ Required quotes around :lang() values involving an asterisk; only language codes which happen to bhe CSS identifiers can be used unquoted.
注記: 2018 年 2 月 1 日付 草案は、不注意に,まだ完遂していない作業の~commitを含んでいた。 この~commit は 2018 年 2 月 2 日に復帰された。 ◎ Note: The 1 February 2018 draft included an inadvertent commit of unfinished work; 2 February 2018 has reverted this commit (and fixed some links because why not).
21. 謝辞
CSS working group は、この仕様の基礎を成している仕様も含め,年月に渡り 以前の~Selectors仕様 に協力されてきたすべての方々に感謝する。 特に、~Selectors~Level 4 に協力された次の方々に,特別な謝意を: ◎ The CSS working group would like to thank everyone who contributed to the previous Selectors specifications over the years, as those specifications formed the basis for this one. In particular, the working group would like to extend special thanks to the following for their specific contributions to Selectors Level 4:
L. David Baron, Andrew Fedoniouk, Ian Hickson, Grey Hodge, Lachlan Hunt, Jason Cranford Teague
22. ~privacy/~security上の考慮点
選択子は,~DOMを手動で辿ることですでに可能である能を超えるものは供さないので、この仕様は、新たな ~privacy/~security 上の考慮点を導入するものではない。 ◎ This specification introduces no new privacy or security considerations, as selectors do not provide any ability not already possible by walking the DOM manually.