DEV Community


Posted on

Memo: Specificity from Learn CSS!

Specificity scoring

Specificity is how the browser chooses which style to use, and how to control this selection.

This article is a memo of I learned from the article below 👇 Please check this article as well ✨(There are some quizes to try your understandings)

Points of specificity chart

specificity cart

Specificity in context

Points of specificity is added up when they are combined.

// 41 points of specificity[href]:hover {
  color: lightgrey;
Enter fullscreen mode Exit fullscreen mode

Best practice

Generally keeping scores low to prevent complexity.

Top comments (2)

alohci profile image
Nicholas Stimpson

It's sad how much of that article is a mixture of wrong and out of date. I really recommend you looking for a better source that describes the modern cascade.

takuyakikuchi profile image

Thanks for your comment!