Understanding Selectors & Specificity

CSS Selectors Taxonomy

Selectors target HTML elements to apply styles. They scale from simple tags to advanced relational queries.

# Basic Selectors

• **Type Selector**: Targets tag names directly (e.g. `h1`).
• **Class Selector**: Targets custom class name values (e.g. `.card`).
• **ID Selector**: Targets singular unique ID tags (e.g. `#navbar`).

# The Specificity Hierarchy

Specificity is a score calculated by browsers that determines which style rule takes precedence: 1. **Inline styles**: high weight (`style="color: red"`). 2. **IDs**: moderate weight (`#header`). 3. **Classes & attributes**: light weight (`.active`). 4. **Element tags**: low weight (`div`).