CSS Selectors are the fundamental patterns used to find and select the HTML elements you want to style. They are the essential bridge between structural data and visual design.
1The Foundations of Targeting
Without a targeting mechanism, a CSS rule does not know where to apply its visual logic. Type Selectors (like h1 or p) are the broadest tools, perfect for setting global typographic defaults across your entire site. For specific UI components, we use Class Selectors (.button), which map to the class attribute in HTML. Classes are the backbone of modern CSS because they are highly reusable.
2Specificity and Context
When you need to target a completely unique element, the ID Selector (#header) maps to the id attribute. However, because IDs are mathematically more 'specific' in CSS logic than classes, relying heavily on IDs can lead to styling conflicts that are difficult to override. To style elements based on their location, Descendant Selectors (like nav a) allow you to target elements contextually without adding extra markup.
