Selecteurs

Selecteurs, or selectors, are patterns used in CSS to identify elements in a document to which style rules apply. They form the core mechanism by which CSS selects elements for styling and interact with the cascade, inheritance, and specificity to determine the final presentation.

Basic selectors include type selectors (the name of an element like div or p), the universal selector * , class selectors (.class), id selectors (#id), and attribute selectors ([attr], [attr="value"], [attr^="prefix"]). These can be combined to target precise elements.

Combinators specify relationships between elements: a space denotes a descendant relationship, > selects direct children, + selects adjacent siblings, and ~ selects general siblings. This allows complex targeting based on document structure.

Pseudo-classes and pseudo-elements extend selectors with state or generated content. Pseudo-classes such as :hover, :focus, and :nth-child(2n) select elements in particular states or positions. Pseudo-elements like ::before and ::after target or insert content before or after elements.

Specificity and cascade: when multiple rules apply to the same element, the browser resolves conflicts using specificity, which is calculated from inline styles, IDs, classes/attributes/pseudo-classes, and element/pseudo-elements. Inline styles have the highest weight, followed by IDs, then classes/attributes/pseudo-classes, then element/pseudo-elements. If specificity is equal, the later rule in the source order wins.

Examples: p { color: blue; } changes all paragraph text to blue. .menu > li a:hover { text-decoration: underline; } applies when a hovered link is inside a list item within an element with class menu.

Notes: selectors should be clear and maintainable; very long or overly specific selectors can hinder readability and, in some cases, performance on large documents.

---