CSS3 — Understanding the Cascade

Having an understanding of the idea of the cascade is important when dealing with CSS, because many CSS development problems are due to styles being unintentionally applied to an element.

How does the browser decide which styles to apply?

So how does the browser understand our intentions? When more than one rule can be applied to the same element, the browser uses the cascade to determine which style properties to apply.

Our example has a general style rule focused on paragraph elements, and then a more specific rule aimed at one or more particular paragraphs.

Both style rules target paragraphs, but the more specific rule overrides the general rule in the case of matching paragraphs.

p {  
  color: #0000FF;  
}

.sidebar>p {  
  color: #ffffff; 
}

There are four factors that the browser uses to make the decision: weight, origin, specificity, and source order.

The weight of a particular style declaration is determined by the use of the keyword !important. When the keyword appears after a property value, that value can’t be overridden by the same property in another style rule, except in very specific circumstances. Using !important in your stylesheets has a huge negative impact on maintainability, and there’s often little call for it anyway. If you’d like to know more, you can read about it in the SitePoint CSS Reference.

There are three possible stylesheet origins: the browser, the author, and the user. We will focus on what are called author stylesheets; that’s stylesheets written by the web page creator—you! We’ve mentioned the browser internal stylesheet that provides the default styles for all elements, but styles in author stylesheets will always override styles in the browser default stylesheet. The only other possible origin for stylesheets are user stylesheets—custom styles written by the browser users — and even these are overridden by the author stylesheet except in rare circumstances.

The two parts of the cascade that will affect your daily CSS work the most are specificity and source order. The rule of specificity ensures that the style rule with the most specific selector overrides any others with less-specific selectors.

To give you an example of how this works, consider this simple snippet of HTML markup:

<div id="content">
 <p class="message">
   This is an important message.
 </p>
</div>

Now consider the following style rules that are to be applied to this HTML:

p { color: #000000; }
.message { color: #CCCCCC; }
p.message { color: #0000FF; }
#content p.message { color: #FF0000; }

These four selectors all match the paragraph element in the example HTML and set the text color. What color will be applied to the paragraph? If you guessed #FF0000, or red, you’d be right. The p type selector (any p element) has the lowest level of specificity, with .message (any element with class message) coming next. The selector p.message (any p element with class message) then has a higher level of specificity. The highest is the selector #content p.message (any p element with class message that is a child of the element with id content).

Longer selectors aren’t necessarily more specific. An ID selector, for example, will always have a higher specificity than an element type or class selector. It becomes trickier the more complex your selectors are.

If two or more style rules are still applicable to an element, the order in which the rules appear — the source order—is used. The last rule to be declared is applied. This is also true if you declare more than one style rule with the same selector; for example, .message in your stylesheet. It will be the second instance of the rule that will be applied to the element.

There are a number of detailed articles online explaining cascade and specificity. These include a series on SitePoint’s CSS Reference, which are highly recommend once you’ve a good grasp of some of the basics.

This is an excerpt from The CSS3 Anthology, 4th Edition, by Rachel Andrew

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.