CSS TutorialLesson 43Free preview

CSS Specificity

This lesson is part of CSS · All levels

Summary

Specificity is the rule of thumb when multiple selectors are challenging the same element. Each selector is rated by weight: the highest inline style, then the id, then the class and pseudo-class, then the regular element. If the weight is the same, the last written rule in CSS is used.

Key points

Weigh specificity from highest to lowest: inline style, id, class or pseudo-class, then element.
When the weight is the same, the last rule appearing on the stylesheet used wins.
The universal selector (*) does not add weight at all.
Picking a selector just to win is not a good practice; more neatly simplifies the structure.
DevTools mark the losing rules with a trick so they can be easily checked.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.