Specificity

Specificity is a numerical value that determines which CSS rule applies when multiple rules target the same element. Higher specificity wins in the cascade.

Specificity Values

Selector Type	Point Value	Example
ID	100 points	#header
Class/Attribute/Pseudo-class	10 points	.button, [type], :hover
Type/Pseudo-element	1 point	div, ::before
Universal	0 points

CSS

/* Calculating specificity */

/* Element selector: 1 point */
div {
  color: blue;  /* Specificity: 0,0,1 */
}

/* Class selector: 10 points */
.button {
  color: red;   /* Specificity: 0,1,0 */
}

/* ID selector: 100 points */
#header {
  color: green; /* Specificity: 1,0,0 */
}

/* Combined selectors: add them up */
div.active {
  color: purple; /* Specificity: 0,1,1 (10+1) */
}

#header .button {
  color: orange; /* Specificity: 1,1,0 (100+10) */
}

Common Specificity Patterns

CSS

/* Low specificity (easy to override) */
p {
  color: black;   /* 0,0,1 */
}

/* Medium specificity */
.primary-text {
  color: red;     /* 0,1,0 */
}

/* Higher specificity */
.sidebar .primary-text {
  color: blue;    /* 0,2,0 */
}

/* High specificity (hard to override) */
#sidebar-content {
  color: green;   /* 1,0,0 */
}

Warning

Avoid creating overly specific selectors. They're hard to override and cause CSS maintenance problems. Keep specificity low and consistent.

Note

Specificity determines which CSS rule applies. IDs = 100, Classes = 10, Types = 1. Higher specificity wins. Keep specificity low for maintainable CSS.

Inheritance: [Inheritance](/css/inheritance).