CSS Conflict Resolution Rules Explained

Published in

Web For You

5 min readJun 29, 2020

How often have we felt like smashing our heads into the wall when the CSS doesn’t behave as we expect it to? I hope to spare you from some of the pain today with this article on CSS Conflict Resolution Rules. So, let's get rolling…

Pre-Requisites — Basic HTML and CSS

1. Origin Precedence

(a) When in Conflict

Remember that, an HTML page is read sequentially from top to bottom. When there are two different specified styles for an element, the declaration at the bottom wins. For external stylesheets, consider it to be at the position of the declaration of the stylesheet. Because of this, for example, one should always declare the user stylesheet after the Bootstrap stylesheet so that we can override any bootstrap styles we want.

(b) When not in Conflict

When there are two different declarations for the same element but they focus on different attributes, the styles simply merge, and the element displays properties of both the declarations. In fact, whenever two declarations are not in conflict with each other, they merge.

In the above code, there are 2 style declarations. The text-colour is in conflict, but other styles are not, so, What will be the output?

According to the rules, the colour, which is in conflict, is received from the bottom declaration. The non-conflicting ones, like background colour, are received from the upper declaration.

2. Inheritance

A child element always inherits the styles of the parent element, unless declared otherwise separately. Even here, if the declarations are not in conflict, they simply merge.

Try to figure out what will happen in the code above. This includes the application of both, the principles of origin as well as inheritance.

As we can see, the text colour is inherited from the parent element. The background colour is received from the styles of the box. There are 2 conflicting declarations for “box4”, both of which have the same specificity(we will come to specificity in the next paragraph). So, the bottom declaration wins, and the font-size becomes 1em.

3. Specificity

When two different selectors are used but both select the same element, the precedence is decided by specificity rules. We can think of the specificity of an element as a 4-digit number, and the greater number wins. The number is found in the following way:-

The thousands digit denotes the presence of inline styles.
The hundreds digit denotes the number of IDs specified in the declaration.
The tens digit denotes the number of classes specified in the declaration.
The one's digit denotes the number of HTML tags specified in the declaration.

Now, try to figure out what will happen in the following code:

Let's find the specificity scores for each element:

First box:

There are two selectors for the first box. One is using “div >.box”, and the other is the inline style. Let's compare their scores:

Using the rules above, the selector using inline styles gets a score of 1000.

The selector using “div > .box” gets a score of 0011.

So, selector using inline style wins(since 1000>11), and the conflicting style, i.e., font-colour, should be purple. The other styles should simply merge.

Second box:

Again there are two selectors here, namely “#b” and “div > .box”.

“#b” gets a score of 0100, and “div > .box” has score of 0011.

Again, as 100>11, the ID selector wins, although there are no conflicting declarations here.

Third box: There is only one selector “div > .box”.

Fourth box: The “div > .box” is common for this as well. The other one has two classes, and therefore has a score of 0020.

Again, as 20>11, “.box4.box” wins. Let's have a look at the output.

Note: You may find the inline style very powerful, and want to use it every time. However, using inline styles is bad practice. The CSS styles should all be at one place, thus one should refrain from using inline styles. Inline-styles are used the majority of the time when you want to quickly check how the element looks with the style.