CSS Specificity Calculator
Calculate and compare CSS specificity for any selector. See a visual breakdown of how IDs, classes, and elements contribute to selector weight. Paste multiple selectors to rank them.
One selector per line. Results update as you type.
Common Examples
Click any example to load it into the calculator.
How CSS Specificity Works
Inline Styles (1,0,0,0)
Styles applied directly on an element via the style attribute. They override almost everything except !important.
- style="color: red"
IDs (0,X,0,0)
Each #id selector adds 1 to the ID column. IDs are the most powerful selector type in stylesheets.
- #header
- #nav #logo
Classes, Attributes & Pseudo-classes (0,0,X,0)
Includes .class, [attr], :hover, :focus, :nth-child(), and similar pseudo-classes.
- .active
- [type="text"]
- :hover, :focus, :nth-child(2)
Elements & Pseudo-elements (0,0,0,X)
Type selectors (div, p, a) and pseudo-elements (::before, ::after, ::placeholder).
- div, p, h1, a
- ::before, ::after
- ::placeholder, ::selection
Special Pseudo-classes
:where() always has zero specificity. :is() and :not() take the specificity of their most specific argument. :has() also takes its argument's specificity.
Combinators & Universal
Combinators (>, +, ~, space) and the universal selector (*) add zero specificity. They select elements but do not increase weight.
| Selector | Specificity | Category |
|---|---|---|
| * | 0,0,0,0 | Universal |
| li | 0,0,0,1 | Element |
| ul li | 0,0,0,2 | Elements |
| ul ol+li | 0,0,0,3 | Elements + combinator |
| .class | 0,0,1,0 | Class |
| li.class | 0,0,1,1 | Element + class |
| ul li.active | 0,0,1,2 | Elements + class |
| #id | 0,1,0,0 | ID |
| #id .class | 0,1,1,0 | ID + class |
| #id .class li | 0,1,1,1 | ID + class + element |
| style="" | 1,0,0,0 | Inline |