CSS Specificity Calculator Visual

A

Inline Styles

Styles applied directly via the style attribute. Highest specificity.

B

ID Selectors

Selectors like #header. Each ID adds 1 to this column.

C

Classes, Attributes & Pseudo-classes

Includes .nav, [type="text"], :hover, :focus

D

Elements & Pseudo-elements

Tags like div, p, and pseudo-elements like ::before

CSS Specificity Calculator