The CSS selector represents a particular pattern of element or elements in a tree structure. The term "selector" can refer to asimple selector, acompound selector, or acomplex selector. When included in the:has() pseudo-class as a parameter, these selectors are referred to asrelative selectors, representing elements relative to one or more anchor elements.

These selectors can be combined into a comma-separatedselector list. If any selector in anon-forgiving selector list is invalid, the entire selector list is invalidated.

Simple selector

Asimple selector is a selector with a single component, such as a single type selector, attribute selector, or pseudo-class, that's not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. Any selector that contains a singlebasic selector,attribute selector,pseudo-class, orpseudo-element selector is a simple selector.

#myId {}[pattern*="\d"] {}

Compound selector

Acompound selector is a sequence ofsimple selectors that are not separated by acombinator. A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector.

a#selected {}[type="checkbox"]:checked:focus {}

In a compound selector, thetype selector oruniversal selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. As whitespace represents thedescendant combinator, no whitespace is allowed between the simple selectors that make up a compound selector.

Complex selector

Acomplex selector is a sequence of one or more simple and/or compound selectors that are separated by combinators, including the white spacedescendant combinator.

A complex selector represents a set of simultaneous conditions on a set of elements.

a#selected > .icon {}.box h2 + p {}

Selectors can be read from right to left. For example,a#selected > .icon matches all elements with a class oficon that are the direct children of the<a> element with the idselected. The selector.box h2 + p matches the first<p>s to come immediately after any<h2> elements that are descendants of any element with the class ofbox.

Selector list

Aselector list is a comma-separated list of simple, compound, and/or complex selectors. A given element is said to match a selector list when the element matches any (at least one) of the selectors in that selector list.

#main,article.heading {}

If any selector in anon-forgiving selector list is invalid, the entire selector list is invalidated.

#main,:bad-pseudoclass,.validClass {  /* `:bad-pseudoclass` is invalid, invalidating this style block */}

The:is() and:where() pseudo-classes can be used to constructforgiving selector lists.

Relative selector

Arelative selector is a selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don't begin with an explicit combinator have an implieddescendant combinator.

Relative selectors cannot be used in a selector list. Rather, it is accepted within certain contexts, such as the:has() pseudo-class.

:has(+ div#topic > #reference) {}:has(> .icon) {}dt:has(+ img) ~ dd {}

Specifications

See also

• CSS selectors and combinators
• Forgiving selector list
• Document.querySelector()
• Document.querySelectorAll()
• CSS selectors module
• CSS pseudo-elements module