CSS Style Precedence

There are many instances when styles in a stylesheet intersect with each other i.e are applied on the same element or group of elements. In such cases, the interpreter has to essentially figure out which of the styles will be applied in preference to all others. This mechanism is given the name style precedence.

So what is style precedence? Let's discuss it.

Take a minute or two to Google out the meaning of the word "precedence" and try to relate it with the phrase "style precedence".

In the most basic way, precedence signifies importance over others. When we talk about style precedence in CSS we are talking about the whole mechanism of determining which styles to prefer in a given list of them; with a number of factors contributing to the end result.

Amongst the toughest and most detailed concepts of CSS is style precedence- there is undoubtedly a lot to understand and comprehend potentially, however difficult doesn't always mean difficult and this is just the case with this topic as you will agree by the end of it.

Sometimes being technical doesn't cost much and hence following is a stricter definition of style precedence.

But uptil now we've only expressed this idea in terms of paragraphs and definitions, not really seen how it looks on the front end. So why not move to an example to a get a better hang of these things.

Consider the code snippets below:

p {color: blue}
p {color: orange}

If we apply the following CSS, what can you predict about the color of the paragraph?

There is a 99% chance that you picked up Orange and hence the correct choice! And there is also a 99% chance the while choosing the answer you really didn't think about style precedence! Did you? Well this is an instance of CSS style precedence in action!

A number of factors affect precedence as we will see next.

It would be a matter of just minutes to list out all the factors affecting style precedence and wind up things quickly but we won't go this way. Instead we will demonstrate each factor one by one with code examples and then get you to determine what is affecting and how?

In this way you will be able to visualize things better as you read along the chapter. So are you ready to go on the count of 3,2,1...

Position of styles

Consider the following code, same as the one we saw above:

p {
    color: blue;
    font-size: 15px;
    color: green;
}

Can you determine the color of the paragraph in this case?

It would be green! Well deducing this arguably wasn't much of a mess, as you had solved a similar problem already above. Anyways now you know one thing for sure that the position of a CSS style effects its precedence. But can you think how?

Observing the results from the examples above we can deduce that the later a style comes in an HTML page or CSS stylesheet, the higher is its level of precedence and as a result wins the whole race of getting applied to the respective selector.

Specificity

Consider the following HTML and CSS. .para is the class of the p element we saw above.

.para {color: orange}
p {color: green}

And now deduce which color would be applied to the paragraph. Hint: It isn't as easy as it might seem at the first glance.

It would be orange! Now this might've gone against what you would be thinking i.e a later style precedes the ones earlier. However what's more important than the position, is the type of selector.

Class selectors have a higher level of precedence than element selectors. After some while we will formally define this term "level of precedence".

Class selectors, pseudo-classes, attribute selectors all have the same level of precedence.

Now let's consider another example:

#p1 {color: green}
.para {color: yellow}

Once again decide which color will be given to the paragraph.

It would be green! This is because id selectors account for a higher level of precedence as compared to any other selector.

This means that id's have a higher level of precedence as compared to element selectors, class selectors - infact all of them.

Anyways over to some more sub-factors on this.

Deduce the color in the following CSS:

body p {color: yellow}
p {color: orange}

Did you select yellow? If you did then you answered correctly! Yes the color would be yellow but can you also give a reasoning to why?

This is because the more dense a selector the higher precedence it has. In other words the more the number of selectors in a statement, the higher is its level of precedence.

Therefore since body p is a denser selector statement with 2 selectors it wins over p which has only 1 selector.

Lastly in the whole list of example, consider the HTML and CSS code below:

<p id="p1" class="para" style="color: blue">A paragraph</p>

p {color: orange}

And now let's see whether you can figure out the color correctly this time!

It would be blue! Why? Because of the fact that inline styles (in the style attribute) have an even higher level of precedence as compared to any CSS selector. Just consider the fact that when we inline styles on an element we have already selected it and hence are, in effect, writing more important styles there.

An inline style will override any selector be it of type id, class, element, whatever. However this assumes that !important is not set on the value. See the next section to understand it.

Now finally its time to give all this mess a formal definition to help you understand all these examples even better.

Defining specificity - the level of precedence

In CSS, each selector is associated with a certian level of importance known as its specificity. Where ever in this section we used the term "level of precedence" we in effect meant specificity.

Inline styles have the highest specificity as compared to id selectors that have a higher level of specificity as compared to class selectors which further have a higher level of it as compared to element selectors and so on.

Specificity can be given a mathematical taste too as shown below.

Each selector combination such as body p, p.para etc. can be calculated in its specificity by the following rules.

Start with 0 specificity and then:

1. Add 1000 if the styles come in the style attribute. This is highest specificity for any style.
2. Add 100 for every id selector in the entire sleector combination.
3. Add 10 for every class, attribute and pseudo-class selector.
4. Add 1 for every element and pseudo-element selector.

Let's now calculate some specificities.

body p has a specificity of 2 since (add 1 for body and 1 for p).

body p.para has a specificity of 12 (1 for body, 1 for p and 10 for para)

!important keyword

The king of precedence is perhaps the !important keyword. If given to any style declaration it makes the style override all other styles be they in the style attribute, id selector, class selector or anything else.

NOTHING can override !important styles except for another !important declaration later in the style sheet.

And by nothing we literally mean nothing!

p {color: orange !important}
#p1 {color: green}

Now one paramount thing to remember over here is that it's usually recommended to avoid this keyword, unless the problem can't be solved any other way. It complicates the normal workflow of style precedence and can't be overridden without using it once more - both of which are absolutely not good!

And with this we end this fairly lond style precedence chapter. Style precedence is undoubtedly a vital concept for devlopers to understand and at the same it's not that easy to get at first glance.

Take some time to practice these concepts out, and once you do this a couple of times over a week you will find yourself in a position where you can give the next lesson on CSS Style Precedence.