Specificity: Which Style Wins

CSS provides a formula for determining a style’s specificity that’s based on a value assigned to the style’s selector—a tag selector, class selector, ID selector, and so on. Here’s how the system works:

 

• A tag selector is worth 1 point.
• A class selector is worth 10 points.
• An ID selector is worth 100 points.
• An inline style (page 39) is worth 1,000 points.

 

The bigger the number, the greater the specificity. So say you create the following three styles:

 

• a tag style for the <img> tag ( specificity = 1)
• a class style named .highlight (specificity = 10)
• an ID style named #logo (specificity = 100)