The Cascade, Specificity and Inheritance

Introduction

Sooner or later you write a rule, nothing changes, and you wonder why. Usually another rule is winning. The "C" in CSS stands for Cascading: it is the system the browser uses to settle such conflicts. Learn it once and a lot of confusion disappears.

Rule 1: later wins (when equal)

If two rules have the same weight, the one written later wins.

Rule 2: more specific wins

A more specific selector beats a less specific one, no matter the order. From weakest to strongest:

1. Element selectors (p) and pseudo-elements
2. Class selectors (.note), attributes and pseudo-classes (:hover)
3. Id selectors (#intro)
4. Inline styles (the style attribute)

Counting specificity

Think of specificity as three numbers: (ids, classes, elements).

• p is (0, 0, 1)
• .note is (0, 1, 0)
• p.note is (0, 1, 1)
• #intro .note p is (1, 1, 1)

Compare from left to right. One id beats any number of classes.

The !important trap

!important overrides almost everything, which sounds handy but causes trouble. Once you use it, the only way to beat it is another !important. Treat it as a last resort and fix the underlying specificity instead.

Inheritance

Some properties are inherited: a child element uses its parent's value if you do not set its own. Text properties such as color, font-family, font-size and line-height are inherited. Box properties such as margin, padding and border are not.

You can force inheritance with inherit, or undo your changes with initial and unset.

Tips for easy-to-manage CSS

• Style with classes, not ids.
• Keep selectors short. Avoid long chains like div .a .b p.
• Do not use !important to win fights.
• Put general rules first and specific rules later.

Try it yourself

Make the paragraph green without using !important or changing the order. Hint: use a selector with higher specificity than .note, such as p.note.

Summary

• When rules conflict, the cascade picks one: more specific first, then later.
• Specificity order: element, class, id, inline.
• Avoid !important.
• Text properties are inherited. Box properties are not.