Calculate specificity in your head
Basic form {ID}-{Class}-{Element}, where:
| Name | Specificity | Examples |
|---|
| ID | (1,0,0) | #foo |
| Class | (0,1,0) | .foo, [foo], :root, :focus |
| Element | (0,0,1) | h1, ::before |
| Universal | (0,0,0) | * |
| Where | (0,0,0) | :where(.active) |
| Is, Not, Has | (max of selectors) | :is(:focus, .active) |
| Nth child | (max of selectors) + (0,1,0) | :nth-child(even of :not(.hidden)) |
| Host | (sum of selectors) + (0,1,0) | :host(.footer) |
| Slotted | (sum of selectors) + (0,0,1) | :slotted(span) |