Specificity applies when multiple CSS declarations target the same element. The browser will look at the specificity score to determine which style should be applied when an element has conflicting style rules. Occasionally, we attempt to target an HTML element more than once and rely on specificity to determine which style will be applied to the element.

The !important rule takes precedence over any other declarations. However, using !important is a bad practice and should be avoided.

To calculate the specificity score, start at 0, add 1000 for an inline style attribute, add 100 for each ID selector, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in "body #content .data img:hover" the specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.

Learn more