CSS Selectors

Basic

Selectors match elements

A selector is a pattern used to determine which elements a style rule applies to. The selector answers “which elements?”; the declarations answer “what presentation values should apply?”

?

Simple selectors

Type selectors match by element name. Class selectors match elements whose class attribute contains the requested class. ID selectors match the element with the requested ID. These are different matching mechanisms, but all three belong to selector matching.

?

Attribute selectors

Attribute selectors match elements according to the presence or value of an attribute. They can test presence, exact values, and several value patterns. The HTML attribute supplies the data; CSS defines the matching condition.

?

Namespace-qualified selectors

CSS Namespaces is a stable CSS module that lets a stylesheet bind namespace prefixes with `@namespace` and then use qualified names such as `svg|circle` in selectors. This matters when a document mixes namespaces, such as HTML containing inline SVG. Any `@namespace` rules must come after `@charset` and `@import` and before other non-ignored rules in that stylesheet.

?

Selector lists

A selector list lets one rule apply to several selector patterns. Each selector in the list is independently matched. Keep the list focused on the same presentation intent rather than using it to hide unrelated rules.

?

Logical selector combinations

Selectors Level 4 adds functional pseudo-classes that let one selector express alternatives, exclusions, and specificity control without repeating whole selector lists. `:is()` matches when any argument matches, `:not()` matches when none of its arguments match, and `:where()` matches like `:is()` but contributes zero specificity for the pseudo-class and its arguments.

?

Relational selection with `:has()`

The relational pseudo-class `:has()` matches an element when at least one relative selector matches when evaluated with that element as the anchor. It lets the matched element depend on a relationship that is described inside the argument, such as a card that contains an image or a label followed by a control. It is a selector relationship, not a DOM query API.

?

Filtering child indexes with `of S`

The `of S` clause on `:nth-child()` and `:nth-last-child()` filters the sibling set before the index is counted. This is different from selecting every nth child and then testing whether that element matches `S`: the filtering changes which siblings receive positions.

?

Keep selector matching separate from host-language state

Selectors Level 4 also defines families for language and direction (`:lang()`, `:dir()`), location (`:target`, `:scope`), interaction, input state, and element display state. They remain selectors, but the host language or another CSS module may define the state that makes a pseudo-class match. This lesson focuses on the selector matching model; HTML-specific semantics and control behavior stay in the HTML/host-language owners.

?

Pseudo-classes

Pseudo-classes represent conditions or states of elements. They can depend on document relationships, user interaction, language, form state, or other defined conditions. They are still selectors: the CSS property is applied only when the pseudo-class matches.

?

Pseudo-elements

Pseudo-elements represent a particular part or generated portion associated with an element. They use the double-colon notation in modern CSS, such as `::before`, `::after`, and `::first-line`.

?

Combinators express relationships

Combinators are part of selector matching, not a separate styling system. They relate compound selectors through relationships in the document tree. The descendant, child, next-sibling, and subsequent-sibling combinators express different relationship widths.

?

Sibling combinators

The next-sibling combinator `+` matches a following sibling immediately after the first match. The subsequent-sibling combinator `~` matches later siblings that share the same parent, even when other siblings occur between them.

?

Compound selectors and specificity belong together

A compound selector combines simple selectors without a combinator, such as `button.primary[aria-pressed="true"]`. The selector matching model and specificity are related, but specificity is a cascade input; this lesson only explains enough specificity to read selector behavior. The Cascade lesson owns conflict resolution.

?

Advanced selector boundaries

Selectors Level 4 remains the main selector foundation. The current W3C Editor’s Draft is dated 18 September 2026. The current Selectors Level 5 Editor’s Draft adds developing families such as `:local-link`, `:state()`, `:heading()`, time-dimensional pseudo-classes, grid structural selectors, and reference combinators. This lesson intentionally names that surface without cataloguing every draft-only selector; detailed ownership stays with Selectors rather than being split into thin feature pages.