Test your knowledge: The Cascade, Specificity, and Inheritance

Review

1. One rule uses a single class, another uses seven element selectors. Which wins, and why?

   Specificity compares selectors as three counters: identifiers, then classes and pseudo-classes, then elements. Comparison runs column by column from the left, so the first column where they differ settles it, and a class outranks any pile of element selectors.
2. A rule with one ID selector meets a rule with three classes. Who wins the property?

   A single id beats any number of classes, which is what the leftmost column of the specificity triplet means in practice. It is also why ids in selectors paint a stylesheet into corners.
3. Two rules with identical specificity both set color. Which one applies?

   When origin and specificity tie, source order decides, and the last declaration written wins. It is the quiet third rule of the cascade, and the reason reordering a stylesheet changes what you see.
4. Which of these properties flows down from parent to child by default?

   Text properties such as color, font-family, and line-height inherit until a rule interrupts them, while box properties such as border, margin, and background do not, because a border on a list item spreading into every paragraph inside it would be chaos, not convenience.
5. Where does an inline style="..." attribute rank in the cascade?

   Inline styles outrank every selector, one step below importance, which is why they cause trouble: no stylesheet rule can override them without raising the stakes. That is the second problem with them, right after scattering styling through the markup.