Specificity Calculation (0, 0, 0, 0)
When multiple CSS rules target the same element, the browser applies the rule with the highest specificity score:
- Inline styles (
style="...") =(1, 0, 0, 0) - IDs (
#header) =(0, 1, 0, 0) - Classes, attributes, pseudo-classes (
.btn,[type="text"],:hover) =(0, 0, 1, 0) - Elements & pseudo-elements (
h1,div,::after) =(0, 0, 0, 1)
/* Specificity: (0, 0, 0, 1) */
p { color: black; }
/* Specificity: (0, 0, 1, 0) - WINS over element */
.text-muted { color: gray; }
/* Specificity: (0, 1, 1, 0) - WINS over class */
#main-content .text-muted { color: slateblue; }