CSS Specificity is a way to determine which CSS rule is applied when there are conflicting rules.

The specificity of a CSS selector is determined by the number of elements, classes, and IDs in the selector.

IDs have the highest specificity, followed by classes, and then elements.

Specificity can be written as a-b-c, where a is the number of IDs, b is the number of classes, and c is the number of elements.

Lets look at an example:

#header .nav li a {
  color: #000;
}

#header gives use 1-0-0, .nav gives us 0-1-0, li gives us 0-0-1, and a gives us 0-0-1.

Add them all together and we get 1-1-2.

For even more details about !important, inline styles, etc, check out mdn: specificity.

References

TIL: Root vs HTML

Mar 14, 2024

Css,

🤓 Today I Learned

The pseudo selector :root has greater specificity than html. Because of this, you'll often see :root to define global variables.