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.[ref]
Selectors Level 4 by World Wide Web Consortium. §3, selector structure and matching; simple, compound and complex selectors
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.[ref]Selectors Level 4 by World Wide Web Consortium. Descendant and Child Combinators; Selector Lists; User Action Pseudo-classes
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. New to topics? Read the docs here!