Specificity rules in CSS - Browser Rendering Trace

Render Flow - Specificity rules

Parse CSS selectors

↓

Calculate specificity

↓

Compare specificity values

↓

Apply styles with highest specificity

↓

Render final styles on elements

The browser reads CSS selectors, calculates their specificity scores, compares them, and applies the styles with the highest specificity to the matching elements.

Render Steps - 3 Steps

Code Added:div { color: orange; }

Before

[div]
 Hello World (default black color)

→

After

[div]
 Hello World (orange color)

The div element is styled with orange color from the type selector.

🔧 Browser Action:Matches div element, applies color style, triggers paint.

Code Sample

A div with class 'box' and id 'unique' has three conflicting color styles; the browser chooses the color based on specificity rules.

CSS

<div class="box" id="unique">
  Hello World
</div>

CSS

.box { color: red; }
#unique { color: green; }
div { color: orange; }

Render Quiz - 3 Questions

After applying step 2, what color is the text inside the div?

A Green

B Red

C Orange

D Blue

Common Confusions - 3 Topics

Why does the ID selector override the class selector even if the class is declared later?

Because ID selectors have higher specificity than class selectors, the browser applies the ID style regardless of order. Specificity beats source order.

💡 Higher specificity selectors always win over lower ones, no matter where they appear.

Why doesn't the inline style get overridden by the ID selector?

Inline styles have the highest specificity (except !important), so they override ID selectors unless !important is used.

💡 Inline styles trump all selectors except !important rules.

What happens if two selectors have the same specificity?

The browser applies the style declared last in the CSS source, so later rules override earlier ones if specificity ties.

💡 When specificity ties, the last declared style wins.

Property Reference

Selector Type	Specificity Value	Example	Visual Effect	Common Use
Type Selector	0,0,0,1	div	Lowest specificity, applies basic styles	Styling elements by tag name
Class Selector	0,0,1,0	.box	Overrides type selectors, styles groups	Styling groups of elements
ID Selector	0,1,0,0	#unique	Overrides class and type selectors, very specific	Styling unique elements
Inline Style	1,0,0,0	style="color: blue;"	Overrides all selectors except !important	Direct element styling
Universal Selector	0,0,0,0	*	Lowest specificity, rarely overrides	General resets or base styles

Concept Snapshot

Specificity determines which CSS rule applies when multiple match. ID selectors have higher specificity than class selectors. Class selectors override type selectors. Inline styles override all selectors except !important. If specificity ties, the last declared rule wins.