DEV Community

TK
TK

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)
Specificity

Points of specificity chart

specificity cart

Specificity in context

Points of specificity is added up when they are combined.

// 41 points of specificity
a.my-class.another-class[href]:hover {
  color: lightgrey;
}
Enter fullscreen mode Exit fullscreen mode

Best practice

Generally keeping scores low to prevent complexity.

Oldest comments (2)

Collapse
 
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.

Collapse
 
takuyakikuchi profile image
TK

Thanks for your comment!