The Effect of Importance and Origin on CSS Specificity

When we think of the cascading nature of CSS, we usually think of specificity. Rules that are applied to an ID override rules that are applied to a class. However, specificity is not the only factor taken into account when determining which of two conflicting rule declarations should prevail.

According to the W3C Recommendation, there are 4 stages to cascade -

1. Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.

• Sort according to importance and origin.
• Sort rules with the same importance and origin by specificity of selector. More specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.
• Finally, sort by order specified. If two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Before the specificity of the rule is taken into account, the importance and origin of the rule is first considered.

Importance and Origin #

Declaration Origin #

The origin of the rule declared refers to where it comes from. There are three potential origins for a rule.

User agent - This is typically the browser. Browsers have their own “user agent stylesheet” with default styles. For example, in most browsers, a default style included is -

head {
  display: none;
}

Author - This refers to the person creating the website. The person who writes the HTML and CSS processed by the user agent. Styles written by the author are included either inline or by linking to an external stylesheet.

<p style=“color: red;">Lorem ipsum</p>

User - This refers to the person using the website. This person can include their own CSS to be used within a browser across all websites they visit. User defined styles are usually for accessibility concerns, for example -

p { font-size: 18px; }
a { text-decoration: underline; }

Declaration Importance #

The importance of the rule is whether it has been specified as important or normal. By default, all rules are considered normal until we specify them to be important.

A rule can be marked as important by using the !important rule -

p {
  font-size: 18px !important;
}

The Balance Between Importance and Origin #

Once the importance and origin have been determined, conflicting rules relating to the same element are sorted according to the following -

1. User agent declarations (lowest priority)
2. User normal declarations
3. Author normal declarations
4. Author important declarations
5. User important declarations (highest priority)

This means that only multiple rules with the same level of importance and origin will move to the stage of determining specificity. If a rule does not have competing rule of the same importance and origin, its specificity is not considered.

Take, for example, this paragraph.

<p class=“foo” id=“bar”>Lorem ipsum dolor sit amet.</p>

Example 1. If there is an !important rule defined in the user stylesheet, it will prevail over more specific rules in the author stylesheet.

/* user defined stylesheet */
p { color: orange !important; } /* this will prevail */

/* author stylesheet */
p { color: red; }
.foo { color: green; }
#bar { color: blue; }

Example 2. If there is an !important rule defined in the author stylesheet, it will prevail over more specific normal rules in the both stylesheets.

/* user defined stylesheet */
#bar { color: orange; }

/* author stylesheet */
p { color: red !important; } /* this will prevail */
.foo { color: green; }
#bar { color: blue; }

Example 3. If there are two conflicting normal rules, the one in the author stylesheet will prevail, even if it is less specific.

/* user defined stylesheet */
#bar { color: orange; }

/* author stylesheet */
.foo { color: green; } /* this will prevail */

Because user defined stylesheets are not particularly common, the origin aspect is something us, as authors, need to be concerned about less. However, if we ever need to write a user agent stylesheet, it helps to know how to write rules that can/cannot be overridden.