Explain how a browser determines what elements match a CSS selector.

TL;DR

Conceptually, selector matching starts from the rightmost compound selector—the candidate element—and checks relationships toward the left. For .card > .title, an element must first match .title, then its parent must match .card. Engines index and optimize selectors internally, so “shorter selectors are always faster” is not a reliable rule. Prefer selectors that communicate intent and profile style recalculation when it is actually significant.

Explain how a browser determines what elements match a CSS selector.

The browser parses selectors into components and tests them against elements while calculating styles. The rightmost compound selector is often called the subject or key selector because it identifies the element that receives the declarations.

Matching relationships

For this selector:

article.featured > h2 a[aria-current='page'] {
  font-weight: 700;
}

The browser conceptually checks whether a candidate:

Is an <a> with aria-current="page".
Has an ancestor <h2>.
Has an <h2> ancestor whose direct parent is <article class="featured">, as required by >.

If any condition fails, that candidate does not match. Actual engines maintain indexes, caches, bloom filters, and invalidation data, so this model explains semantics without promising one implementation algorithm.

Dynamic style invalidation

Matching is not only an initial-load operation. Adding a class, changing an attribute, inserting an element, or updating state can make selectors start or stop matching. The engine determines which elements might be affected and recalculates their styles. A selector's cost therefore depends on DOM size, mutation patterns, how broadly its rightmost part selects candidates, and engine optimizations—not just character count.

Write maintainable selectors with deliberate scope and low enough specificity to override safely. Avoid changing markup solely to micro-optimize selector matching without evidence. In a real slowdown, record the interaction in the Performance panel and inspect Recalculate Style duration, affected element count, and repeated DOM mutations.

Exercises

Beta

TL;DR