HTML 5.2: 4.15. Matching HTML elements using selectors

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document was published by the Web Platform Working Group as a Proposed Recommendation for HTML 5.2 that would obsolete the HTML 5.1 Recommendation. An HTML 5.1 Candidate Recommendation was published on 08 August 2017, and this document has incorporated feedback received on that draft. This document is intended to become a W3C Recommendation. Feedback and comments on this specification are welcome. Please use Github issues. Historical discussions can be found in the public-html@w3.org archives.

The W3C Membership and other interested parties are invited to review the document and provide feedback using Github issues through 30 November 2017. Advisory Committee Representatives should consult their WBS questionnaires. Note that substantive technical comments were expected during the Last Call review period that ended 5 September 2017. All comments are welcome.

Errata for this document are recorded as issues. The latest HTML editors' draft shows the current proposed resolution of errata in situ.

All interested parties are invited to provide implementation and bug reports and other comments through the Working Group's Issue tracker. These will generally be considered in the development of HTML 5.3.

The implementation report produced for this version demonstrates that in almost every case changes are matched by interoperable implementation.

Publication as a Proposed Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 March 2017 W3C Process Document.

4.15. Matching HTML elements using selectors

4.15.1. Case-sensitivity

The Selectors specification leaves the case-sensitivity of element names, attribute names, and attribute values to be defined by the host language. [SELECTORS4]

Selectors defines that ID and class selectors, when matched against elements in documents that are in quirks mode, will be matched in an ASCII case-insensitive manner.

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.

When comparing the name part of a CSS attribute selector to the names of namespace-less 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.

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 §10 Rendering:

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

All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching. This includes:

IDs and classes in no-quirks mode and limited-quirks mode
the names of elements not in the HTML namespace
the names of HTML elements in XML documents
the names of attributes of elements not in the HTML namespace
the names of attributes of HTML elements in XML documents
the names of attributes that themselves have namespaces

4.15.2. Pseudo-classes

There are a number of dynamic selectors that can be used with HTML. This section defines when these selectors match HTML elements. [SELECTORS4] [CSS-UI-3]

:link

:visited

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.

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

The :active pseudo-class is defined to match an element while an element is being activated by the user.

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.

If the element has a descendant that is currently matching the :active pseudo-class

The element is being activated.

If the element is the labeled control of a label element that is currently matching :active

The element is being activated.

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

The element is being activated if it is in a formal activation state and it is not disabled.

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 an a element that has an href attribute

If the element is an area element that has an href attribute

If the element is a link element that has an href attribute

If the element has its tabindex focus flag set

The element is being activated if it is in a formal activation state.

If the element is being actively pointed at

The element is being activated.

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.

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 remote control on a television, the time during which the remote control is pointing at the element).

:hover

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.
An element that has a descendant that the user indicates using a pointing device.
An element that is the labeled control of a label element that is currently matching :hover.

Consider in particular a fragment such as:

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

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

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.

:enabled

The :enabled pseudo-class must match any element that is one of the following:

a button element that is not disabled
an input element that is not disabled
a select element that is not disabled
a textarea element that is not disabled
an optgroup element that does not have a disabled attribute
an option element that is not disabled
a fieldset element that is not a disabled fieldset

:disabled

The :disabled pseudo-class must match any element that is actually disabled.

:checked

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

The :indeterminate 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 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

The :default pseudo-class must match any element falling into one of the following categories:

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

:valid

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

:invalid

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

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.

:out-of-range

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

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

:optional

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

:read-write

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: [SELECTORS4]

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

The :read-only pseudo-class must match all other HTML elements.

:dir(ltr)

The :dir(ltr) pseudo-class must match all elements whose directionality is 'ltr'.

:dir(rtl)

The :dir(rtl) pseudo-class must match all elements whose directionality is 'rtl'.

Another section of this specification defines the target element used with the :target pseudo-class.

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. [SELECTORS4]