HTML — 選択子と CSS を利用する HTML 要素の照合法, 他

他のすべて — 属性~値もそれ以外も含む — に対しては、 選択子の目的においては， 全体が`一致-$する場合に限り合致するものと扱うモノトスル。 これには、 次に挙げるものが含まれる： ◎ All other attribute values and everything else must be treated as entirely identical to each other 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$r では、 `過去互換~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 による定義（和訳）への~link（ “↗” ）も与える。 】

`defined@ps `↗$PS

`定義-済み$である要素に合致するモノトスル。 ◎ The :defined pseudo-class must match any element that is defined.

`link@ps `↗$PS

`visited@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たす要素は、［ `link$ps, `visited$ps ］いずれか一つに合致するモノトスル：

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

◎ All a elements that have an href attribute, and all area 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 `↗$PS

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

~HTML~UAは、 `active$ps 疑似類を定義する目的に限り，所与の要素は［ ~OR↓ を満たすとき，`作動化されて$いる ］と見なすモノトスル： ◎ 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.

• ［ ~OR↓ を満たす ］~AND［ `正式に作動化~状態にある$ ］：

  • `button$e 要素である
  • `input$e 要素であって, その `type$a1 属性の状態 ~IN { `Submit$st, `Image$st, `Reset$st, `Button$st }
  • `a$e 要素であって, `href$a1 属性を有する
  • `area$e 要素であって, `href$a1 属性を有する
  • `~focus可能$である

  ◎ If the element is a button element ◎ If the element is an input element whose type attribute is in the Submit Button, Image Button, Reset Button, or Button state ◎ If the element is an a element that has an href attribute ◎ If the element is an area element that has an href attribute ◎ If the element is focusable ◎ • The element is being activated if it is in a formal activation state.

  例えば，［ 利用者が~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.

• `能動的に指されて$いる ◎ If the element is being actively pointed at • The element is being activated.

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

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装置により指示されていて，その装置が “押下げ” 状態にある ］間， `能動的に指されて@ いる（ `being actively pointed at^en ）とされる （例： ~mouse用には，~mouse~buttonが押されてから離されるまで ／ 複-~touch環境~用には，手指が表示-面に~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).

注記： `SELECTORS$r の定義により、 `active$ps は，`作動化されて$いる要素の［ `平坦~tree$における先祖 ］にも合致する。 ◎ Per the definition in Selectors, :active also matches flat tree ancestors of elements that are being activated. [SELECTORS]

加えて、［ 現在 `active$ps に合致している `label$e 要素 ］の`~label先~control$である要素も， `active$ps に合致するとする （が、`作動化されて$いるものとはされない）。 ◎ Additionally, any element that is the labeled control of a label element that is currently matching :active, also matches :active. (But, it does not count as being being activated.)

`hover@ps `↗$PS

`hover$ps 疑似類は、 利用者が~pointing装置で要素を `指名して@ いる間 ， その要素に合致するものと定義されている。 ~HTML~UAは、 `hover$ps 疑似類を定義する目的に限り， 所与の要素は［ 利用者が~pointing装置を利用して，指名している ］ならば［ 利用者が`指名して$いる ］と見なすモノトスル。 ◎ 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 an element that the user indicates using a pointing device.

注記： `SELECTORS$r の定義により、 `hover$ps は，`指名されて$いる要素の［ `平坦~tree$における先祖 ］にも合致する。 ◎ Per the definition in Selectors, :hover also matches flat tree ancestors of elements that are designated. [SELECTORS]

加えて、［ 現在 `hover$ps に合致している `label$e 要素 ］の`~label先~control$である要素も， `hover$ps に合致するとする （が、`指名されて$いるものとはされない）。 ◎ Additionally, any element that is the labeled control of a label element that is currently matching :hover, also matches :hover. (But, it does not count as being designated.)

次の様な~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 `疑似類$に合致するのは： ◎ 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.＼

• `id=a^a を伴う要素 ⇒ 利用者が`指名して$いるので合致する。 ◎ The element with ID "a" matches it by being designated;＼
• ［ `label$e ／ `p$e （および，上には示されていない `p^e の先祖すべて） ］要素 ⇒ `SELECTORS$r による［ 平坦~treeにおける先祖についての条件 ］に従って合致する。 ◎ the label and p elements match it because of the condition in Selectors about flat tree ancestors;＼
• `id=c^a を伴う要素 ⇒ 上に与えた［ `~label先~control$に関する追加的な条件 ］を通して合致する （すなわち，それ用の `label$e 要素が `hover$ps に合致する）。 ◎ and the element with ID "c" matches it through the additional condition above on labeled controls (i.e., its label element matches :hover).＼

しかしながら， `id=b^a を伴う要素は、 その［ 平坦~treeにおける子孫 ］は，どれも指名されていないので — そのような子孫が `hover$ps に合致するとしても — `hover$ps には`合致しない^em。 ◎ However, the element with ID "b" does not match :hover: its flat tree descendant is not designated, even though that flat tree descendant matches :hover.

`focus@ps `↗$PS

`~focusを得ている$とされる，どの要素にも合致するモノトスル。 この疑似類の目的においては、 ~AND↓ を満たす要素が， `~focusを得ている@ とされる： ◎ For the purposes of the CSS :focus pseudo-class, an element has the focus when:

• `~navigable容器$でない ◎ it is not itself a navigable container; and

• ~OR↓ が満たされる： ◎ any of the following are true:

  • 要素 ~IN `~top-level辿可能の現在の~focus鎖$ ◎ it is one of the elements listed in the current focus chain of the top-level traversable; or
  • `~focusを得ている$別の要素 %E が在って，次を満たす ⇒ 要素の`~shadow根$el ~EQ %E の`根$ ~NEQ ~NULL ◎ its shadow root shadowRoot is not null and shadowRoot is the root of at least one element that has the focus.

`target@ps `↗$PS

`文書$の`~target要素$ ~NEQ ~NULL ならば それに合致するモノトスル。 そのような要素は、 `target^ps 疑似類の目的において， ~target要素 であるとされる。 `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]

`popover-open@ps

次を満たす`~HTML要素$に合致するものと定義される ⇒ ［ `~popover要素$である ］~AND［ `~popover可視性~状態$ ~EQ `示している$i ］ ◎ The :popover-open pseudo-class is defined to match any HTML element whose popover attribute is not in the no popover state and whose popover visibility state is showing.

`disabled@ps `↗$PS

`enabled@ps `↗$PS

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

`checked@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たすものに合致するモノトスル：

`input$e	［ `type$a1 属性の状態 ~IN { `Checkbox$st, `Radio$st } ］~AND［ `~check有りか$fe ~EQ ~T ］
`option$e	`選択状態$ ~EQ ~T

◎ The :checked pseudo-class must match any element falling into one of the following categories: • 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 `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たすものに合致するモノトスル： ◎ The :indeterminate pseudo-class must match any element falling into one of the following categories:

`input$e	［ `type$a1 属性の状態 ~EQ `Checkbox$st ］~AND［ `indeterminate$c ~IDL属性 ~EQ ~T ］
`input$e	［ `type$a1 属性の状態 ~EQ `Radio$st ］~AND［ 要素が属する`~radio~button~group$に属する どの `input$e 要素も，次を満たす ］ ⇒ その`~check有りか$fe ~NEQ ~T
`progress$e	`value$a1 内容~属性を有さない

◎ 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 `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たすものに合致するモノトスル： ◎ The :default pseudo-class must match any element falling into one of the following categories:

`提出-~button$	要素の`~form所有者$の`既定の~button$である
`input$e	［ `checked$a1 属性が`適用される$ ］~AND［ `checked$a1 属性を有する ］
`option$e	`selected$a1 属性を有する

◎ Submit buttons that are default buttons of their form owner. ◎ input elements to which the checked attribute applies and that have a checked attribute ◎ option elements that have a selected attribute

`placeholder-shown@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たすものに合致するモノトスル：

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

◎ 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

`valid@ps `↗$PS

`invalid@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を［ 満たすもの, 満たさないもの ］（同順）に合致するモノトスル：

`拘束~検証の候補$である	`自身の拘束を満たして$いる
`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

`user-valid@ps `↗$PS

`user-invalid@ps `↗$PS

［ `input$e ／ `textarea$e ／ `select$e ］要素のうち［ `利用者~妥当性$ ~EQ ~T ］~AND［ `拘束~検証の候補$である ］を満たすもののうち，`自身の拘束を満たして$［ いるもの, いないもの ］（同順）に合致するモノトスル。 ◎ The :user-valid pseudo-class must match input, textarea, and select elements whose user validity is true, are candidates for constraint validation, and that satisfy their constraints. ◎ The :user-invalid pseudo-class must match input, textarea, and select elements whose user validity is true, are candidates for constraint validation but do not satisfy their constraints.

`in-range@ps `↗$PS

`out-of-range@ps `↗$PS

［ `拘束~検証の候補$である ］~AND［ `範囲~制限がある$ ］を満たす要素のうち，次を［ 満たすもの, 満たさないもの ］（同順）に合致するモノトスル ⇒ ［ `~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 `↗$PS

`optional@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を［ 満たすもの, 満たさないもの ］（同順）に合致するモノトスル：

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

◎ 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

`autofill@ps

`-webkit-autofill@ps

いずれも、［ `input$e 要素のうち，~UAにより~autofillされる（自動的に埋められる）もの ］に合致するモノトスル — ただし，利用者が~autofillされる欄を編集して以降は、 合致しないモノトスル。 ◎ The :autofill and :-webkit-autofill pseudo-classes must match input elements which have been autofilled by user agent. These pseudo-classes must stop matching if the user edits the autofilled field.

注記： そのような~autofill法は， `autocomplete$a 属性を介しても起こり得るが、 ~UAは，その属性が孕まれない下でも~autofillできる。 ◎ One way such autofilling might happen is via the autocomplete attribute, but user agents could autofill even without that attribute being involved.

`read-write@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たすものに合致するモノトスル： ◎ 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$a1 属性が`適用される$ ］~AND［ `変異-可能$feである（すなわち， `readonly$a1 属性を有さない, かつ `不能化されて$feいない） ］
`textarea$e	［ `readonly$a1 属性を有さない ］~AND［ `不能化されて$feいない ］
上に挙げたもの以外の要素	［ `編集中の~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 `↗$PS

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

`modal@ps `↗$PS

`modal$ps `疑似類$は、 ~OR↓ を満たす要素に合致するモノトスル： ◎ The :modal pseudo-class must match any element falling into one of the following categories:

• ［ `dialog$e 要素である ］~AND［ `~modalか$ ~EQ ~T ］ ◎ dialog elements whose is modal flag is true
• `~fullscreenか$ ~EQ ~T ◎ elements whose fullscreen flag is true

`dir(ltr)@ps `↗$PS

`dir(rtl)@ps `↗$PS

`方向性$が［ `~ltr$st, `~rtl$st ］（同順）である どの要素にも合致するモノトスル。 ◎ 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'.

`state()@ps — ~custom状態~疑似類 ◎ Custom state pseudo-class

`state(識別子)^ps は、 次を満たす`~custom要素$に合致するモノトスル ⇒ %識別子 ~IN その`状態~集合$の`~set~entry群$ ◎ The :state(identifier) pseudo-class must match all custom elements whose states set's set entries contains identifier.

`playing@ps

次を満たす`~media要素$に合致するモノトスル ⇒ その `paused$mM 属性 ~EQ ~F ◎ The :playing pseudo-class must match all media elements whose paused attribute is false.

`paused@ps

次を満たす`~media要素$に合致するモノトスル ⇒ その `paused$mM 属性 ~EQ ~T ◎ The :paused pseudo-class must match all media elements whose paused attribute is true.

`seeking@ps

次を満たす`~media要素$に合致するモノトスル ⇒ その `seeking$mM 属性 ~EQ ~T ◎ The :seeking pseudo-class must match all media elements whose seeking attribute is true.

`buffering@ps

次を満たす`~media要素$に合致するモノトスル ⇒ ［ その `paused$mM 属性 ~EQ ~F ］~AND［ その `networkState$mM 属性 ~EQ `NETWORK_LOADING$mM ］~AND［ その `準備状態^i ~LTE `HAVE_CURRENT_DATA$mM ］ ◎ The :buffering pseudo-class must match all media elements whose paused attribute is false, networkState attribute is NETWORK_LOADING, and ready state is HAVE_CURRENT_DATA or less.

`stalled@ps

次を満たす`~media要素$に合致するモノトスル ⇒ ［ `buffering$ps `疑似類$に合致している ］~AND［ その`現在~停滞-中か$ ~EQ ~T ］ ◎ The :stalled pseudo-class must match all media elements that match the :buffering pseudo-class and whose is currently stalled is true.

`muted@ps

次を満たす`~media要素$に合致するモノトスル ⇒ `消音-$されている ◎ The :muted pseudo-class must match all media elements that are muted.

`volume-locked@ps

次が満たされる間は、 どの`~media要素$にも合致するモノトスル ⇒ ~UAの`音量は~lockされたか$ ~EQ ~T ◎ The :volume-locked pseudo-class must match all media elements when the user agent's volume locked is true.

`open@ps `↗$PS

次の表tの 1 列目に挙げる要素のうち，同じ行の 2 列目に与える条件を満たすものに合致するモノトスル：

`details$e	`open＠~HEinteractive#attr-details-open$a 属性を有する
`dialog$e	`open＠~HEinteractive#attr-dialog-open$a 属性を有する
`select$e	［ `~drop-down~box$として具現化されている ］~AND［ その~drop-down~boxは開いている ］
`input$e	［ `~pickerを~support$する ］~AND［ その~pickerは開いている ］

◎ The :open pseudo-class must match any element falling into one of the following categories: • details elements that have an open attribute • dialog elements that have an open attribute • select elements that are a drop-down box and whose drop-down boxes are open • input elements that support a picker and whose pickers are open

注記： 要素がいつ `lang()$ps 疑似類 `SELECTORS$r に合致するかについては （，この仕様では定義されないが）、 その仕様の中で，言語に不問な流儀で詳細~に足るよう定義される。 ◎ 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 Selectors. [SELECTORS]