= CSS selector
{c}
A <CSS selector> describes which elements a styling rule matches. It can constrain an element's type, <HTML attributes>, structural relationships or state. The declarations in a rule then apply to matching elements, subject to the <CSS cascade>; matching and choosing a winning declaration are separate operations.<Selectors Level 4 by World Wide Web Consortium>[§3, selector structure and matching; simple, compound and complex selectors]{ref}
For example, `p.warning` matches a paragraph whose class list contains `warning`. Writing `p .warning` instead uses a descendant <CSS combinator>: it matches a classed element inside a paragraph, rather than requiring the paragraph itself to carry that class. The space is therefore meaningful syntax.
A child <CSS combinator> changes the relationship again. `article > p.warning` matches warning paragraphs directly inside an article, while `article p.warning` also permits intervening elements. A comma-separated selector list can describe alternatives, and a <CSS pseudo-class> such as `:hover` can test an element's state.<Selectors Level 4 by World Wide Web Consortium>[Descendant and Child Combinators; Selector Lists; User Action Pseudo-classes]{ref}
A successful match says nothing by itself about whether one declaration defeats another. If both `p.warning` and `#notice` match an element, <CSS specificity> and earlier cascade priorities help choose the result. A <CSS selector> should also be distinguished from a <CSS pseudo-element>, which can address an abstract part or generated box rather than simply selecting another existing <HTML element>.
Back to article page
