UX Design and Development course

CSS: the cascade, specificity, and inheritance


What is specificity?

Specificity is a method of conflict resolution within the cascade.

Specificity is calculated in a very particular way, based on the values of 4 distinct categories. For explanatory purposes, the CSS2 spec represents these categories using the letters a, b, c, and d. Each has a value of 0 by default.

  • a is equal to 1 if the declaration comes from a style attribute in the HTML (“inline styles”) rather than a CSS rule with a selector.
  • b is equal to the number of ID attributes in a selector.
  • c is equal to the number of other attributes and pseudo-classes in a selector.
  • d is equal to the number of elements and pseudo-elements in a selector. The specificity is given by concatenating all 4 resulting numbers. More specific selectors take precedence over less specific ones.

For example, the selector #id .class[href] element:hover contains:

  • 1 ID (b is 1)
  • 1 class, 1 attribute selector, and 1 pseudo-class (c is 3)
  • 1 element (d is 1)

Therefore, it has a specificity of 0,1,3,1. Note that a selector containing a single ID (0,1,0,0) will have a higher specificity than one containing any number of other attributes or elements (e.g., 0,0,10,20). This is one of the reasons why many modern CSS architectural patterns avoid using IDs for styling purposes.

What is inheritance?

Inheritance is distinct from the cascade and involves the DOM tree.

Inheritance is the process by which elements inherit the the values of properties from their ancestors in the DOM tree. Some properties, e.g. color, are automatically inherited by the children of the element to which they are applied. Each property defines whether it will be automatically inherited.

The inherit value can be set for any property and will force a given element to inherit its parent element’s property value, even if the property is not normally inherited.

About !important

The above should make it apparent that !important is a separate concept to specificity. It has no effect on the specificity of a rule’s selector.

An !important declaration has a greater precedence than a normal declaration (see the previously mentioned cascade sorting logic), even declarations contained in an element’s style attribute.

CSS Specificity And Inheritance


CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it.

But this apparent simplicity is deceitful. If after a few hours of work, your perfectly crafted website looks great in Safari, all hell might break loose if you haven’t taken the necessary measures to make it work in Internet Explorer. In a panic, you add hacks and filters where only a few tweaks or a different approach might do. Knowing how to deal with these issues comes with experience, with trial and error and with failing massively and then learning the correct way.

Understanding a few often overlooked concepts is also important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

A more indepth article then that of Nicolas Gallagher, but a most read. This article goes in great detail of what it means to understand the CSS specificity and inheritance model.

1. Importance

By default, this is the order in which the different sources are processed, so the author’s rules will override those of the user and user agent, and so on.

2. Specificity

Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

3. Inheritance

A succinct and clear explanation of inheritance is in the CSS3 Cascading and Inheritance module specifications (still in “Working draft” mode):

Inheritance is a way of propagating property values from parent elements to their children.