Specificity and Inheritance

Learning objectives#

• Explain the cascade order
• Calculate specificity scores
• Know which properties inherit
• Use inherit, initial and unset
• Avoid !important wars

Explanation#

When several rules set the same property on an element, CSS picks a winner in this order: importance (!important), then specificity, then source order (later wins).

Specificity is a score of three columns (ids, classes, elements). #nav = 1-0-0; .menu a:hover = 0-2-1; p = 0-0-1. Compare column by column, left to right: one id beats any number of classes.

Classes, attributes ([type]) and pseudo-classes (:hover) all count in the middle column. Elements and pseudo-elements count in the right column. * counts nothing. Inline style beats all selectors.

Inheritance: text-related properties (color, font, line-height) pass from parent to children automatically. Box properties (margin, border, background, width) do not.

inherit forces inheritance, initial resets to the CSS default, unset does whichever is natural for the property.

Code example: Who wins?#

1<style>
2  p { color: gray; }                 /* 0-0-1 */
3  .note { color: green; }            /* 0-1-0 → beats p */
4  #special { color: purple; }        /* 1-0-0 → beats .note */
5  .box p.note { color: orange; }     /* 0-2-1 */
6  .note { color: teal; }             /* 0-1-0, later than first .note → beats it, but not 0-2-1 */
7

8  .box { color: crimson; font-family: Georgia, serif; border: 2px solid crimson; padding: 8px; }
9  .box a { color: inherit; }         /* links normally ignore parent colour */
10</style>
11

12<p>Plain paragraph → gray</p>
13<p class="note">.note → teal (later .note wins)</p>
14<p class="note" id="special">#special → purple (id wins)</p>
15

16<div class="box">
17  <p class="note">.box p.note → orange (most specific)</p>
18  Box text is crimson and serif. <a href="#">This link inherits crimson</a>.
19  <span>Spans inherit the font and colour but not the border.</span>
20</div>

Each line shows its colour and the reason: gray, teal, purple, orange, then crimson text inside a bordered box where the link and span inherit colour and font but not the border.

Step-by-step explanation#

1. p alone has the lowest specificity.
2. Two .note rules tie on specificity, so the later one (teal) wins.
3. #special has an id, so it beats every class-based rule.
4. .box p.note has two classes and one element (0-2-1), beating plain .note.
5. Text properties inherit from .box; the border does not.
6. Links have their own browser colour, so color: inherit makes them use the parent’s.

Real-world use case#

Common mistakes#

Best practices#

• Keep specificity low and flat (single classes)
• Avoid ids and !important in stylesheets
• Order stylesheets general → specific
• Use :where() to write zero-specificity defaults

Remember this#

Practice exercise#

1(a) nav ul li a       → 0-0-4
2(b) .menu .item:hover → 0-3-0
3(c) #header .logo     → 1-1-0   ← strongest

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.