Chapter 5: Specificity

Specificity pertains to the relevance of a given style to the selected portion of the page. Selectors have weightings, determining which one “wins.”

Introduction to Specificity

We'll be looking at slides 42-68. (It sounds like a lot, but slides 50-62 are an activity in calculating specificity.)

Part 1: Specificity demo

• Beginning CodePen
• Ending CodePen

Part 2: Specificity quiz

Try Estelle Weyl's specificity quiz.

Part 3: Specificity and inheritance together

This interaction can be confusing. See what it's like when specificity and inheritance interact.

• Beginning CodePen
• Ending CodePen

Part 4: You try it: Specificity and inheritance

For each style rule in the CodePen, calculate the specificity of the selector. Then explain why it affects the elements that it does. Think about what's selected as well as what's inherited and how those characteristics interact and override each other.

• Beginning CodePen
• Ending CodePen