CSS Cascade and Specificity

Ever wonder why they are called “cascading” style sheets? CSS allows you to apply several style sheets to the same document, which means there are bound to be conflicts. CSS handles such conflicts through a process known as the cascade.

The cascade refers to what happens when several sources of style information vie for control of the elements on a page: style information is passed down (“cascades” down) until it is overridden by a style command with more weight.

For example, if you don’t apply any style information to a web page, it will be rendered according to the browser’s internal style sheet (i.e. default rendering; the W3C calls it the user agent style sheet).

Finally, the default style sheets  used by your browser or user agent are given the least importance so you can always override them. To give users more control, they can override any rule by specifying it as !important even  a rule flagged as !important by the author.

Individual users can apply their own styles as well (the user style sheet), which overrides the default styles in their browser. However, if the author of the web page has attached a style sheet (the author style sheet), that overrides both the user and the user agent styles. The only exception is if the user has identified a style as “important,” in which case that style will trump all.

So the cascade works in the following order of importance:

  • User styles flagged as !important
  • Author styles flagged as !important
  • Author styles
  • User styles
  • Styles applied by the browser/user agent

Rules are then ordered by how specific the selector is. Rules with more specific selectors override those with less specific ones. If two rules are equally specific, the last one defined takes precedence.

Specificity

To calculate how specific a rule is, each type of selector is assigned a numeric value. The specificity of a rule is then calculated by adding up the value of each of its selectors.

Unfortunately, specificity is not calculated in base 10 but a high, unspecified, base number. This is to ensure that a highly specific selector, such as an ID selector, is never overridden by lots of less specific selectors, such as type selectors. However, if you have fewer than 10 selectors in a specific selector, you can calculate specificity in base 10 for simplicity’s sake.

The specificity of a selector is broken down into four constituent levels: a, b, c, and d.

  • If the style is an inline style, a equals 1.
  •  b equals the total number of ID selectors.
  • c equals the number of class, pseudo-class, and attribute selectors.
  • d equals the number of type selectors and pseudo-element selectors.

Using these rules, it is possible to calculate the specificity of any CSS selector.

Reference: http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html

Leave a Reply

Your email address will not be published. Required fields are marked *