CSS specificity
This course explains how CSS decides which rule wins when two rules match the same element and set the same property. It covers the fixed order of resolution: importance first, then specificity, then source order. Specificity is calculated as three columns for IDs, classes and elements, compared left to right. The lessons work through real selectors, show why combinators and the universal selector add nothing, and explain inline styles and !important. The last lesson uses the DevTools Styles panel to debug conflicts and lists habits that prevent them.
What you'll learn
- ✓The order CSS uses to resolve conflicts: importance, specificity, source order
- ✓How to write specificity as (IDs, classes, elements) and compare it column by column
- ✓Why combinators and the universal selector add zero specificity
- ✓When source order decides, and why @media never changes specificity
- ✓How inline styles and !important outrank normal rules, and why to avoid them
- ✓How to debug conflicts with the DevTools Styles panel
The question every course so far dodged
The previous course made a claim in passing: a media query rule must come after the base rule it overrides, because both rules have the same specificity, and this course would explain. Here's that explanation. It answers the question every CSS course so far has worked around: when two rules match…
Read the full lesson free →Curriculum
7 lessonsThe question every course so far dodged
Shows that source order decides only on a specificity tie, and lays out the order: importance, specificity, source order.
The specificity calculation: IDs, classes, and elements
Explains specificity as three columns for IDs, classes and elements, compared column by column and never added.
Calculating real selectors, step by step
Calculates the specificity of five real selectors, including pseudo-classes and attribute selectors, piece by piece.
Combinators and the universal selector add nothing
Shows that combinators and the universal selector add zero specificity, which makes a * reset easy to override.
Source order as the tiebreaker
Explains that source order decides only on a full tie, and why @media never changes specificity.
!important and inline styles: the escape hatches
Covers inline styles and !important, how they outrank normal rules, and why both are last resorts.
Putting it together: debugging and preventing specificity wars
Uses the DevTools Styles panel to debug conflicts and lists habits that prevent specificity conflicts.