Selectors

Selectors are patterns used to identify elements in a document to which CSS rules apply. In CSS, a selector matches elements in the document tree and determines which elements a rule should style. They can target elements by type (div, p), by class (.note), by id (#header), by attribute (input[type="text"]), or by relationship in the document structure or state (a:hover, li:first-child).

Common selector types include the universal selector (*) that matches all elements, type selectors, class selectors, and attribute selectors. Pseudo-classes such as :hover and :nth-child(n) target elements in a particular state or position, while pseudo-elements like ::before and ::after create generated content that appears before or after an element’s content. Combinators define relationships between elements: a space denotes a descendant, > denotes a direct child, + denotes an adjacent sibling, and ~ denotes a general sibling. Multiple selectors can be grouped with commas to apply the same rule to different elements.

Specificity and cascade govern how styles are applied. Specificity is determined by a four-part score: inline styles (highest), IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements (lowest). When selectors compete, the one with higher specificity wins; when specificity is equal, the later rule in the source wins. The cascade can also be influenced by important declarations.

Practical guidance emphasizes efficiency: avoid overly broad universal selectors or deep descendant chains, and prefer meaningful class and ID selectors. CSS Selectors standards continue to evolve, introducing additional structural and state-based selectors in newer specifications.