What does the “cascading” in CSS mean?

Picture a newly created element node that is nested within parent and grandparent elements. This node type will be HTMLElement. Every node can be seen to have a property sheet much like how a plain object has attributes and methods. At time of creation it is first populated with attributes inherited from its parent elements.

Now picture all the properties as being huge wall of pigeon hole bins, each bin representing a specific property, such as color or font-face or border, etc. Once the parent node inheritable properties have been distributed we turn to the style sheet. Think of each selector rule as being a separate package and give it to a runner who distributes all the properties in the pigeon holes. When a particular slot has a card in it that has equal or lower importance, it gets swapped out with the new one that just arrived, otherwise the new one is disposed of. Repeat this process with each selector and we see that last rule in is the one that applies.

Cascade refers only to rules we write directly to a node, not those that are inherited. Selectors are declarative and absolute. The order in which they appear in the style sheet has a bearing on how they will apply. That’s where importance comes in. As we said above, if the runner brings a rule with greater or equal importance, the new rule takes the place of the old one. The “equal” in that statement is important to understand, as that is when the last property declaration in as the one that applies is not tied to importance, only timing.

79 Likes