選択子と CSS による HTML 要素の照合法 — Matching HTML elements using selectors and CSS

4.16.1. CSS `attr()^f 関数における大小有無

`CSSVALUES$r 仕様は、 `attr()$f 関数がとる属性~名 部分の大小有無については，~host言語による定義に委ねている。 ◎ The CSS Values and Units specification leaves the case-sensitivity of attribute names for the purpose of the 'attr()' function to be defined by the host language. [CSSVALUES]

［ CSS `attr()$f 関数が引数にとる属性~名の部分 ］と［ `~HTML文書$内の`~HTML要素$上の，名前空間に属さない属性の名前 ］とを比較するときは、その前に，前者を `~ASCII小文字~化$し~MUST。 他の属性と比較するときは、元の大小に則るとする。 いずれにせよ、比較は`文字大小区別$とする。 ◎ When comparing the attribute name part of a CSS 'attr()' function to the names of namespace-less attributes on HTML elements in HTML documents, the name part of the CSS 'attr()' function must first be converted to ASCII lowercase. The same function when compared to other attributes must be compared according to its original case. In both cases, the comparison is case-sensitive.

注記： これは、次~節に指定する CSS `属性~選択子$の名前~部分を比較するときと同じである。 【名前空間に関する部分を除いては。】 ◎ This is the same as comparing the name part of a CSS attribute selector, specified in the next section.

4.16.2. 選択子における大小有無

`SELECTORS$r 仕様は、［ 要素~名 ／ 属性~名 ／ 属性~値 ］に対する大小有無については，~host言語による定義に委ねている。 ◎ The Selectors specification leaves the case-sensitivity of element names, attribute names, and attribute values to be defined by the host language. [SELECTORS]

CSS `型~選択子$を［ `~HTML文書$における`~HTML要素$の名前 ］とを比較するときは、先ず，その選択子を `~ASCII小文字~化$し~MUST。 他の要素と比較するときは、元の大小のままにし~MUST。 いずれにせよ、比較は`文字大小区別$とする。 ◎ When comparing a CSS element type selector to the names of HTML elements in HTML documents, the CSS element type selector must first be converted to ASCII lowercase. The same selector when compared to other elements must be compared according to its original case. In both cases, the comparison is case-sensitive.

［ CSS `属性~選択子$の名前~部分 ］と［ `~HTML文書$における`~HTML要素$~上の属性の名前 ］とを比較するときは、先ず，その選択子の名前~部分を `~ASCII小文字~化$し~MUST。 他の属性と比較するときは、元の大小のままにし~MUST。 いずれにせよ，比較は`文字大小区別$とする。 ◎ When comparing the name part of a CSS attribute selector to the names of attributes on HTML elements in HTML documents, the name part of the CSS attribute selector must first be converted to ASCII lowercase. The same selector when compared to other attributes must be compared according to its original case. In both cases, the comparison is case-sensitive.

`属性~選択子$は、`~HTML文書$における`~HTML要素$の属性については，［ その名前が次に挙げるいずれかである ］ならば，その値を `~ASCII大小無視$で比較し~MUST — ただし、名前 `type^a に限り， 具現化~節にて指定されるもの は除く： ◎ Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive, with one exception as noted in the rendering section:

• `accept^a
• `accept-charset^a
• `align^a
• `alink^a
• `axis^a
• `bgcolor^a
• `charset^a
• `checked^a
• `clear^a
• `codetype^a
• `color^a
• `compact^a
• `declare^a
• `defer^a
• `dir^a
• `direction^a
• `disabled^a
• `enctype^a
• `face^a
• `frame^a
• `hreflang^a
• `http-equiv^a
• `lang^a
• `language^a
• `link^a
• `media^a
• `method^a
• `multiple^a
• `nohref^a
• `noresize^a
• `noshade^a
• `nowrap^a
• `readonly^a
• `rel^a
• `rev^a
• `rules^a
• `scope^a
• `scrolling^a
• `selected^a
• `shape^a
• `target^a
• `text^a
• `type^a ◎ type (except as specified in the rendering section)
• `valign^a
• `valuetype^a
• `vlink^a

例えば，選択子 `[bgcolor="#ffffff"]^css は、~HTML要素が `bgcolor^a 属性を有していて，その値は［ `#ffffff^v ／ `#FFFFFF^v ／ `#fffFFF^v ］ならば，合致する。 これは、 `bgcolor^a の効果が要素になくとも起こる（例： `div$e ）。 ◎ For example, the selector [bgcolor="#ffffff"] will match any HTML element with a bgcolor attribute with values including #ffffff, #FFFFFF and #fffFFF. This happens even if bgcolor has no effect for a given element (e.g., div).

属性~値もそれ以外も含め，他のすべてに対しては、選択子~照合の目的においては，全体を`文字大小区別$として扱わ~MUST。 これには、次に挙げるものが含まれる： ◎ All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching. This includes:

• `非過去互換~mode$／`限定的互換~mode$ における `~ID$と`~class$ ◎ IDs and classes in no-quirks mode and limited-quirks mode
• `~HTML名前空間$に属さない要素の名前 ◎ the names of elements not in the HTML namespace
• `~XML文書$内の`~HTML要素$の名前 ◎ the names of HTML elements in XML documents
• `~HTML名前空間$に属さない要素の属性の名前 ◎ the names of attributes of elements not in the HTML namespace
• `~XML文書$内の`~HTML要素$の属性の名前 ◎ the names of attributes of HTML elements in XML documents
• それ自身が名前空間を持つような属性の名前 ◎ the names of attributes that themselves have namespaces

注記： Selectors では、`過去互換~mode$下にある文書~内の要素に対し［ `~ID選択子$（ `#foo^css など） ／ `~class選択子$（ `.bar^css など） ］を照合するときは，`~ASCII大小無視$で行うものと定義している。 しかしながら，これは、属性~選択子のうち名前~部分が［ `id^l ／ `class^l ］にされたものには適用されない。 選択子 `[class="foobar"]^css は、`過去互換~mode$下であっても，その値を`文字大小区別$として扱うことになる。 ◎ Selectors defines that ID and class selectors (such as #foo and .bar), when matched against elements in documents that are in quirks mode, will be matched in an ASCII case-insensitive manner. However, this does not apply for attribute selectors with "id" or "class" as the name part. The selector [class="foobar"] will treat its value as case-sensitive even in quirks mode.

4.16.3. 疑似類

~HTMLで利用できる いくつもの動的~選択子がある `SELECTORS$r `CSSUI$r 。 この節では、その種の選択子が いつ~HTML要素に合致するか定義する。 ◎ There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements. [SELECTORS] [CSSUI]

【 便宜のため、以下の各~見出しには，当の`疑似類$の `SELECTORS$r による定義への（和訳）参照先リンクも与える。 （ “（ 参照先 ）” と記される。） 】

`defined@ps

`定義-済み$である要素に合致し~MUST。 ◎ The :defined pseudo-class must match any element that is defined.

`link@ps（ `link$PS ）

`visited@ps（ `visited$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を満たす どの要素も， `link$ps, `visited$ps のいずれかに合致し~MUST：

`a$e	`href$hyperlink 属性を有する
`area$e	`href$hyperlink 属性を有する
`link$e	`href$link 属性を有する

◎ All a elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :visited.

この要件を額面通り実装に適用した場合に生じ得る~privacyの懸念を軽減するため、他の仕様により，これらの要素がこれらの`疑似類$にどう合致するかに関して，より特定的な規則が適用され得る。 【 “参照先” に，その詳細が述べられている。】 ◎ Other specifications might apply more specific rules regarding how these elements are to match these pseudo-classes, to mitigate some privacy concerns that apply with straightforward implementations of this requirement.

`active@ps（ `active$PS ）

`active$ps 疑似類は、 要素が利用者により `作動化されている@ 間 その要素に合致するものと定義されている。 ◎ The :active pseudo-class is defined to match an element "while an element is being activated by the user".

`active$ps 疑似類を定義する目的に限り、 ~HTML~UAは，与えられた要素が`作動化されている$かどうかを決定するときは、［［［ 次の表の左列に挙げる条件のうち，最初に要素が満たすもの ］と同じ行の右列に示す条件 ］を要素が満たす ］ときに限り，`作動化されている$ものとし~MUST： ◎ To determine whether a particular element is being activated for the purposes of defining the :active pseudo-class only, an HTML user agent must use the first relevant entry in the following list.

要素が満たす条件	追加の条件
現在 `active$ps 疑似類に合致している要素の先祖である ◎ If the element has a descendant that is currently matching the :active pseudo-class	無条件 ◎ The element is being activated.
［ 現在 `active$ps に合致している `label$e 要素 ］の`~labeled-control$である ◎ If the element is the labeled control of a label element that is currently matching :active	無条件 ◎ The element is being activated.
`button$e 要素である ◎ If the element is a button element	［ `公式的に作動化~状態にある$ ］~AND［ `不能化され$てない ］
`input$e 要素であって, その `type$input 属性の状態 ~IN { `Submit$st, `Image$st, `Reset$st, `Button$st } ◎ If the element is an input element whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state	同上 ◎ The element is being activated if it is in a formal activation state and it is not disabled.
例えば、利用者が ~keyboardで~space-barを叩いて `button$e 要素を押した場合、要素は，［ `keydown$et ~eventを受取った時点 ］から［ `keyup$et ~eventを受取る時点 ］まで，この`疑似類$に合致することになる。 ◎ For example, if the user is using a keyboard to push a button element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event.
`a$e 要素であって, `href$hyperlink 属性を有する ◎ If the element is an a element that has an href attribute	`公式的に作動化~状態にある$。
`area$e 要素であって, `href$hyperlink 属性を有する ◎ If the element is an area element that has an href attribute	同上
`link$e 要素であって, `href$link 属性を有する ◎ If the element is a link element that has an href attribute	同上
`~tabindex~focus~flag$ ~EQ ~ON ◎ If the element has its tabindex focus flag set	同上 ◎ The element is being activated if it is in a formal activation state.
`作動pointedされ$ている ◎ If the element is being actively pointed at	無条件 ◎ The element is being activated.
無条件	決して満たされない条件

要素は、次の間， `公式的に作動化~状態にある@ （ formal activation state ）とされる：

1. 利用者が要素の`作動化の挙動$を誘発する意図を指示し始めた時点から，

2. 次のいずれかのうち，早い方まで：

   • 利用者が要素の`作動化の挙動$を誘発する意図を指示するのを止めた時点 【利用者は作動化の挙動を取り消した】
   • 要素の`作動化の挙動$が稼働し終えた時点

◎ An element is said to be in a formal activation state between the time the user begins to indicate an intent to trigger the element's activation behavior and either the time the user stops indicating an intent to trigger the element's activation behavior, or the time the element's activation behavior has finished running, which ever comes first.

要素は、［ 利用者の~pointing装置により指示されていて，その装置が “押下げ” 状態にある ］間， `作動pointedされ@ ている（ being actively pointed at ）とされる（例： ~mouseに対しては、~mouse~buttonが押されてから離されるまで ／ 複touch環境に対しては，手指が表示-面に触れている間 ）。 ◎ An element is said to be being actively pointed at while the user indicates the element using a pointing device while that pointing device is in the "down" state (e.g. for a mouse, between the time the mouse button is pressed and the time it is depressed; for a finger in a multitouch environment, while the finger is touching the display surface).

`hover@ps（ `hover$PS ）

`hover$ps 疑似類は、 利用者が~pointing装置で要素を指名している間 その要素に合致するものと定義されている。 ~HTML~UAは， `hover$ps 疑似類への合致-を定義する目的に限り、次に挙げる要素は，利用者が指名しているものと~~見なさ~MUST： ◎ The :hover pseudo-class is defined to match an element "while the user designates an element with a pointing device". For the purposes of defining the :hover pseudo-class only, an HTML user agent must consider an element as being one that the user designates if it is:

• 利用者が~pointing装置を利用して指示している要素, または その先祖。 ◎ An element that the user indicates using a pointing device. ◎ An element that has a descendant that the user indicates using a pointing device.
• `hover$ps に現在~合致している `label$e 要素の`~labeled-control$。 ◎ An element that is the labeled control of a label element that is currently matching :hover.

次の様な HTML 片を考える： ◎ Consider in particular a fragment such as:

<p>
  <label for=c> <input id=a> </label>
  <span id=b> <input id=c> </span>
</p>

利用者が~pointing装置で `id=a^a の要素を指名している場合、 `hover$ps 疑似類に合致するのは： `id=a^a の要素とその先祖たち（ `label^e 要素, `p^e 要素，上に示されていない `p^e の先祖すべて）に加えて、上の二番目の条件に合致する `id=c^a の要素になる（対応する `label^e 要素が `hover$ps に合致している）。 一方で，`id=b^a の要素は、どの子孫も指名されていないので，合致しない — 子孫である `id=c^a が `hover$ps に合致していても。 ◎ If the user designates the element with ID "a" with their pointing device, then the p element (and all its ancestors not shown in the snippet above), the label element, the element with ID "a", and the element with ID "c" will match the :hover pseudo-class. The element with ID "a" matches it from condition 1, the label and p elements match it because of condition 2 (one of their descendants is designated), and the element with ID "c" matches it through condition 3 (its label element matches :hover). However, the element with ID "b" does not match :hover: its descendant is not designated, even though it matches :hover.

`focus@ps（ `focus$PS ）

次を満たす，どの要素にも合致し~MUST：

• 要素の`~top-level閲覧文脈$ %T は ~system~focusを得ている, かつ
• 要素は `閲覧文脈~容器$でない, かつ
• 要素は %T の`現在の被focus域$の`~focus鎖$に~listされている。

そのような要素は、 `focus^ps 疑似類の目的において， `~focusを得ている@ とされる。

◎ For the purposes of the CSS :focus pseudo-class, an element has the focus when its top-level browsing context has the system focus, it is not itself a browsing context container, and it is one of the elements listed in the focus chain of the currently focused area of the top-level browsing context.

`target@ps（ `target$PS ）

`Document$I の`標的~要素$ ~NEQ ~NULL ならば それに合致し~MUST。 そのような要素は、 `target^ps 疑似類の目的において， 標的~要素 であるとされる。 `SELECTORS$r ◎ For the purposes of the CSS :target pseudo-class, the Document's target elements are a list containing the Document's target element, if it is not null, or containing no elements, if it is. [SELECTORS]

`disabled@ps（ `disabled$PS ）

`enabled@ps（ `enabled$PS ）

`不能化され得る$要素のうち，［ `実際に不能化されている$もの, そうでないもの ］（同順）に合致し~MUST。 ◎ The :enabled pseudo-class must match any button, input, select, textarea, optgroup, option, or fieldset element that is not actually disabled. ◎ The :disabled pseudo-class must match any element that is actually disabled.

`checked@ps（ `checked$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を満たすものに合致し~MUST： ◎ The :checked pseudo-class must match any element falling into one of the following categories:

`input$e	［ `type$input 属性の状態 ~IN { `Checkbox$st, `Radio$st } ］~AND［ `~checkedness$ ~EQ ~T ］
`option$e	`選択有無$ ~EQ ~T

◎ input elements whose type attribute is in the Checkbox state and whose checkedness state is true ◎ input elements whose type attribute is in the Radio Button state and whose checkedness state is true ◎ option elements whose selectedness is true

`indeterminate@ps（ `indeterminate$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を満たすものに合致し~MUST： ◎ The :indeterminate pseudo-class must match any element falling into one of the following categories:

`input$e	［ `type$input 属性の状態 ~EQ `Checkbox$st ］~AND［ `indeterminate$c IDL 属性 ~EQ ~T ］
`input$e	［ `type$input 属性の状態 ~EQ `Radio$st ］~AND［ 要素が属する`~radio~button群$に属する どの`input$e 要素についても，その`~checkedness$状態 ~NEQ ~T ］
`progress$e	`value$progress 内容~属性を有さない

◎ input elements whose type attribute is in the Checkbox state and whose indeterminate IDL attribute is set to true ◎ input elements whose type attribute is in the Radio Button state and whose radio button group contains no input elements whose checkedness state is true. ◎ progress elements with no value content attribute

`default@ps（ `default$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を満たすものに合致し~MUST： ◎ The :default pseudo-class must match any element falling into one of the following categories:

`button$e	ある~formの`既定の~button$である
`input$e	［ ある~formの`既定の~button$である ］~AND［ `type$input 属性の状態 ~IN { `Submit$st, `Image$st } ］
`input$e	［ `checked$input 属性が`適用される$ ］~AND［ `checked$input 属性を有する ］
`option$e	`selected$option 属性を有する

◎ button elements that are their form's default button ◎ input elements whose type attribute is in the Submit Button or Image Button state, and that are their form's default button ◎ input elements to which the checked attribute applies and that have a checked attribute ◎ option elements that have a selected attribute

`placeholder-shown@ps（ `placeholder-shown$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を満たすものに合致し~MUST：

`input$e	現在 利用者に `placeholder$input 属性が呈示されているもの
`textarea$e	現在 利用者に `placeholder$textarea 属性が呈示されているもの

◎ The :placeholder-shown pseudo-class must match any element falling into one of the following categories: • input elements that have a placeholder attribute whose value is currently being presented to the user. • textarea elements that have a placeholder attribute whose value is currently being presented to the user.

`invalid@ps（ `invalid$PS ）

`valid@ps（ `valid$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を［ 満たすもの, 満たさないもの ］（同順）に合致し~MUST：

`拘束検証の候補$である	`自身の拘束を満たさない$
`form$e	次を満たすような，ある要素の`~form所有者$である ⇒ ［ `拘束検証の候補$である ］~AND［ `自身の拘束を満たさない$ ］
`fieldset$e	次を満たすような，ある要素が子孫にある ⇒ ［ `拘束検証の候補$である ］~AND［ `自身の拘束を満たさない$ ］

◎ The :valid pseudo-class must match any element falling into one of the following categories: • elements that are candidates for constraint validation and that satisfy their constraints • form elements that are not the form owner of any elements that themselves are candidates for constraint validation but do not satisfy their constraints • fieldset elements that have no descendant elements that themselves are candidates for constraint validation but do not satisfy their constraints ◎ The :invalid pseudo-class must match any element falling into one of the following categories: • elements that are candidates for constraint validation but that do not satisfy their constraints • form elements that are the form owner of one or more elements that themselves are candidates for constraint validation but do not satisfy their constraints • fieldset elements that have of one or more descendant elements that themselves are candidates for constraint validation but do not satisfy their constraints

`in-range@ps（ `in-range$PS ）

`out-of-range@ps（ `out-of-range$PS ）

［ `拘束検証の候補$である ］~AND［ `範囲制限がある$ ］を満たす要素のうち，次を［ 満たすもの, 満たさないもの ］（同順）に合致し~MUST ⇒ ［ `~underflowの難あり$でない ］~AND［ `~overflowの難あり$でない ］

◎ The :in-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow. ◎ The :out-of-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow or suffering from an overflow.

`required@ps（ `required$PS ）

`optional@ps（ `optional$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を［ 満たすもの, 満たさないもの ］（同順）に合致し~MUST：

`input$e 要素のうち， `required$input 属性が`適用される$もの	`必須である$
`select$e	`required$select 属性を有する
`textarea$e	`required$textarea 属性を有する

◎ The :required pseudo-class must match any element falling into one of the following categories: • input elements that are required • select elements that have a required attribute • textarea elements that have a required attribute ◎ The :optional pseudo-class must match any element falling into one of the following categories: • input elements to which the required attribute applies that are not required • select elements that do not have a required attribute • textarea elements that do not have a required attribute

`read-write@ps（ `read-write$PS ）

次の表の左列に挙げる要素のうち，同じ行の右列に示される条件を満たすものに合致し~MUST： ◎ The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

`input$e	［ `readonly$input 属性が`適用される$ ］~AND［ `変異-可能$（すなわち， `readonly$input 属性を有さない, かつ `不能化され$てない）である ］
`textarea$e	［ `readonly$textarea 属性を有さない ］~AND［ `不能化され$てない ］
上に挙げたもの以外の要素	［ `編集host$である ］~OR［ `編集-可能$である ］

◎ input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled) ◎ textarea elements that do not have a readonly attribute, and that are not disabled ◎ elements that are editing hosts or editable and are neither input elements nor textarea elements

該当する要素は、 `SELECTORS$r の目的においては，`利用者が内容を改め得る$ものと見なされる。 ◎ ↑

`read-only@ps（ `read-only$PS ）

`read-write$ps 疑似類に合致しない どの`~HTML要素$にも合致し~MUST。 ◎ The :read-only pseudo-class must match all other HTML elements.

`dir(ltr)@ps（ `dir$PS ）

`dir(rtl)@ps（ `dir$PS ）

`方向性$が［ `ltr$st, `rtl$st ］（同順）である どの要素にも合致し~MUST。 ◎ The :dir(ltr) pseudo-class must match all elements whose directionality is 'ltr'. ◎ The :dir(rtl) pseudo-class must match all elements whose directionality is 'rtl'.

注記： 要素がいつ `lang()^ps 疑似類に合致するかについては、（この仕様では定義されないが） `SELECTORS$r 仕様の中で，十分詳細かつ言語非依存に定義される（ `lang$PS ）。 ◎ This specification does not define when an element matches the :lang() dynamic pseudo-class, as it is defined in sufficient detail in a language-agnostic fashion in the Selectors specification. [SELECTORS]