🔍 Single Selector
(0, 0, 0)
Inline
0
style=""
IDs
0
#id
Classes
0
.cls / [attr] / :pseudo
Elements
0
div / ::pseudo-el
⚖️ Compare Mode
🎯 Quiz — Which selector wins?
📋 Specificity Cheatsheet
Selector Types
| #id | ID +1 to (a) |
| .class | Class +1 to (b) |
| [attr], [attr=val] | Attr +1 to (b) |
| :hover, :focus, :nth-child() | Pseudo-class +1 to (b) |
| div, span, h1 | Element +1 to (c) |
| ::before, ::after, ::placeholder | Pseudo-el +1 to (c) |
| * | 0 Universal — no specificity |
| > + ~ (space) | 0 Combinators — no specificity |
| :where() | 0 Always zero specificity |
| :is(), :not(), :has() | Pseudo Takes highest argument specificity |
Key Rules
- Specificity is compared left-to-right:
(a,b,c) - Inline styles beat all selector specificity
!importantoverrides everything (not calculated here)- IDs always beat any number of classes
- Classes always beat any number of elements
:where()has 0 specificity — ideal for resets:is(#id)has specificity (0,1,0) — inherits ID weight:not(.class)has specificity of its argument- Last declared rule wins when specificity is equal
- Specificity doesn't roll over: 10 classes ≠ 1 ID