The cascade
When several rules target the same element, the cascade picks a winner. Specificity is the main tiebreaker, calculated from the kinds of selectors used.
Counting specificity
Think of three buckets:
- IDs are the strongest.
- Classes, attributes, and pseudo classes are next.
- Type selectors and pseudo elements are weakest.
A selector with more of a stronger bucket beats one with fewer. Inline styles outrank selectors, and important overrides all of these.
Practical advice
- Prefer low specificity selectors like single classes.
- Avoid deep selector chains and ids in CSS.
- Reserve important for genuine overrides, not as a habit.
When specificity ties, the rule that appears later wins.
Key idea
Specificity ranks IDs over classes over types, and on a tie the later rule wins, so keep selectors low and flat.