Question 1

What is CSS specificity?

Accepted Answer

CSS specificity determines which CSS rule wins when multiple rules target the same element. It's calculated as a three-part score (A, B, C): A counts IDs (#id), B counts class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover), C counts element types (div, p) and pseudo-elements (::before). A higher score wins, compared left to right. Inline styles have A=1 always. !important overrides everything.

Question 2

How do I calculate CSS specificity?

Accepted Answer

Count three values: A = number of ID selectors (#id), B = number of class selectors (.class), attribute selectors ([type='text']), and pseudo-classes (:hover, :nth-child), C = number of type selectors (div, span, p) and pseudo-elements (::before, ::after). A selector like #nav .item:hover span gives A=1, B=2, C=1 → specificity 0-1-2-1. Compare scores left to right; the first difference determines the winner.

Question 3

Does !important override specificity?

Accepted Answer

Yes. !important overrides the normal specificity cascade entirely. A declaration with !important always wins over declarations without it, regardless of specificity. If two conflicting rules both use !important, normal specificity applies. Overusing !important makes CSS hard to maintain — prefer fixing the selector instead.

Question 4

What has higher specificity: class or ID?

Accepted Answer

ID selectors (#id) have higher specificity than class selectors (.class). An ID scores (1,0,0) while a class scores (0,1,0). This means a single #id selector beats any number of .class selectors — even .a.b.c.d.e.f.g.h.i.j (which is 0,10,0) loses to #id (1,0,0). This is why overusing IDs in CSS can lead to specificity wars.

Question 5

Does the universal selector (*) affect specificity?

Accepted Answer

No. The universal selector (*), combinators (>, +, ~, space), and :is()/:not()/:has()/:where() pseudo-classes do not add to specificity — except their arguments do. :where() always has zero specificity. :is() and :has() take the specificity of their most specific argument. So div * p has specificity (0,0,2) — just the two elements.

Selector type	Score	Example
Inline style (style="")	Always wins	`style="color:red"`
ID selector	A+1	`#header`
Class selector	B+1	`.active`
Attribute selector	B+1	`[type="text"]`
Pseudo-class	B+1	`:hover`, `:nth-child(2)`
Element / type selector	C+1	`div`, `span`
Pseudo-element	C+1	`::before`, `::after`
Universal selector, combinators	0	`*`, `>`, `+`, `~`

CSS Specificity Calculator

How CSS Specificity Works

Scoring Rules