CSS Specificity determines which styles are applied when multiple rules target the same element.
🛠️ Open DevTools (F12) and go to Elements panel
👆 Click on different elements below
📝 Observe the Styles panel on the right
🔍 Notice how specificity affects which styles win by hovering the style
CSS Specificity Numbers (0,0,0)
Specificity is represented as three numbers:
(1,0,0) - Number of ID selectors
(0,1,0) - Number of class and attribute selectors
(0,0,1) - Number of element selectors
Examples:
(1,1,1) - #header .menu p
(2,1,0) - #header #logo .brand
(0,2,3) - nav.menu.dropdown p span a
(1,2,1) - #main .sidebar .widget h2
Specificity Hierarchy (highest to lowest):
!important
Inline styles (style attribute)
IDs (#id)
Classes (.class)
Elements (p, div, etc.)
Specificity Examples
Try inspecting these elements:
This text has inline, ID, class, and element styles
Class selector (.level-1)
Multiple classes. Why level-2 wills level-1?
In CSS, when multiple classes are applied to the same element, the order in the HTML doesn't matter.
What matters is the order of rules in the CSS file. The last matching rule in the CSS file wins,
so .level-2 styles override .level-1 because it's defined later in the stylesheet.