CSS Child / The Cascade

Your rule is not broken, it simply lost the argument.

When styling appears to be ignored, something else almost always won a contest you did not know was happening.

Begin with the correct mental picture, because the wrong one causes years of confusion. You are not giving an element instructions one at a time and watching it obey. You are contributing entries to a competition. Every element on the page gathers up every rule that could possibly apply to it, from every source, and then a decision process picks a single winner for each individual aspect of its appearance. Colour has a winner. Spacing has a winner. Each is decided separately. When your instruction has no visible effect, the overwhelmingly likely explanation is not that you made a typing error but that your entry was submitted, considered, and beaten.

This changes what you should do next, and the change is the most useful thing in this magazine. The instinct, when nothing happens, is to add more: another rule, a stronger one, a duplicate somewhere else. That instinct is understandable and it is wrong, because it treats the symptom while leaving the cause in place, and it leaves behind a page full of rules that exist only because someone was guessing. Every guess you leave behind makes the next problem harder to diagnose, because now the competition has more entrants and none of them are documented.

The discipline is to find out which rule won. Every browser will show you this, and it will show you not only the winner but the losers, in order, with the ones that were overridden marked as such. Learning to read that display is the single highest return investment available to a beginner. It takes perhaps twenty minutes to become comfortable with, and it converts styling from guesswork into reading. Once you can see the competition, you stop arguing with the page and start understanding it, and the frustration that made you consider giving up quietly disappears.