CSS Specificity
The rules browsers use to decide which style applies.
1Hierarchy
ID selectors > Class selectors > Element selectors. Inline styles beat everything.
/* Least specific (1 point) */
p { color: blue; }
/* More specific (10 points) */
.text { color: green; }
/* Most specific (100 points) */
#unique { color: red; }2Understand it in a real interface
Specificity helps resolve competing declarations within the relevant cascade context; it is not the only part of the cascade. Origin, importance, layers, and rule order can also matter. Repeatedly making selectors stronger is usually less maintainable than understanding why a competing declaration is present.
3Try it yourself
Style a link with an element selector and a class selector, then inspect the winning declaration. Remove the stronger rule and compare again. Instead of adding an ID or important flag, simplify the selectors so the intended component rule can work predictably.
Finished reading?
Mark this topic as complete to track progress.