What happens when conflicts occur?

There may be times when two or more declarations are applied to the same element. It is also possible that there may be a conflict between them. When conflicts like this occur, the declaration with the most weight is used. So, how is weight determined?

When documents load in a browser, all declarations are sorted and given a weight. They are then applied to a document based on this weight. There are four steps to sorting. As the process is quite complex, we will use one HTML element (<h2>) as an example.

1. Find all declarations whose selectors match a particular element.

After looking at all style sheets (browser, user and author), all the declarations that match an <h2> element are found.

The browser style sheet may include the following relevant rule:

h2 { font-size: 1.5em; margin: .83em 0; color: black }

The users style sheet could include the following relevant rules

h2 { color: brown !important; }

The author style sheet could include the following relevant rules:

h2 { color: green; font-size: 1.2em; padding: 10px; }
h2#main { color: red; }
h2.navigation { color: blue;}

2. Sort these declarations by weight and origin

The above rules are then sorted by weight and origin. For normal declarations, the author style sheets will override both the user style sheets and the browser style sheet unless there is an !important declaration in the user's style sheet. For "!important" declarations, user style sheets override author and browser style sheets.

For general users, <h2> elements that are not specifically styled with "#main" or ".navigation" will be styled with:

font-size: 1.2em; /* author wins over browser */
margin: .83em 0; /* specified only by browser */
padding: 10px; ; /* specified only by author */
color: green; /* author wins over browser */

For the user that has set an !important rule, <h2> elements that are not specifically styled with "#main" or ".navigation" will be styled with:

font-size: 1.2em; /* author wins over browser */
margin: .83em 0; /* specified only by browser */
padding: 10px; ; /* specified only by author */
color: brown; /* user wins due to !important */

3. Sort the selectors by specificity

Even though we have sorted out the general <h2> style, there still may be conflict in other areas of the document. What happens with an <h2> that has been styled with "#main"?

Every selector is given a specificity which is calculated on the entire selector. More specific selectors will override more general ones. The calculation is based on the following (simplified) rules:

a . count the number of id's in the overall selector
b . count the number of other selectors in the overall selector
c . count the number of elements within the overall selector

These three calculations are then written out as a-b-c. Using the examples above, the following declarations can be scored as:

h2 { font-size: 1.5em; margin: .83em 0; color: black }
0-0-1 > specificity = 1

h2 { color: brown !important; }
0-0-1 > specificity = 1

h2 { color: green; font-size: 1.2em; padding: 10px; }
0-0-1 > specificity = 1

h2#main { color: red; }
1-0-1 > specificity = 101

h2.navigation { color: blue;}
0-1-1 > specificity = 11

This means that "h2#main" has the greatest weight, followed by "h2.navigation".

For general users (who will not be affected by the users !important rule) any <h2> styled with id="main" will be:

color: red; /* id more specific that type selector */

Any <h2> styled with class="navigation" will be:

color: blue; /* class more specific that type selector */

If there was a clash between "#main" and ".navigation" the ID would win and the <h2> will be:

color: red; /* id more specific that class or type selector */

4. Sort by order specified

If two rules have the same weight, origin and specificity, the one written lower down in the style sheet wins. Rules within imported style sheets are considered to be before any rules in the style sheet itself.

For example, the style sheet could contain two identical rules in various sections of the document:

h2 { color: blue;}
h2 { color: green; }

The second rule, that appears later in the style sheet would win.

Further information

Selectors in action »

Other Max Design articles and presentations
Associated with webstandardsgroup.org