How final CSS values are determined - Specificity

As many CSS rules will often apply to a piece of content, CSS must use a standard set of rules to ensure consistent and predictable results.

In my last blog post, I discussed how weights are assigned to declarations with different sources. In this post, I'll examine how final values are determined when the same element has conflicting declarations from the same source.

It's worth repeating though, that inline style attributes have the highest precedence. So where inline styles conflict with other declarations, inline styles take take priority. The same is true of !important, which also takes precedence over other declarations. However, where there are competing !important declaration, the one with the highest specificity wins.

There are three values used when determining the weight of a rules. In order of highest to lowest precedence, theses are:

1) ID Selectors - for example #button-id.

2) Class Selectors - for example .btn

3) Type Selectors - for example <p>

In order to understand how specificities are calculated, look at the following diagram:

Specificity Diagram

Each time a selector includes an ID, class or element, the corresponding value is incremented.

Suppose we had an element targeted by the following rule:

a {
    color: white;
}

 

Because a is an element, we increment the element counter.

Specificity of an element

If the link was shared by an element with the .link class like so:

.link {
    color: black;
}

 

That selector would have the following specificity:

Class Specificity

As class has a higher specificity than element, this declaration would have priority, so the color would be black.

In the following rule, we we make use of an ID selector:

#nav {
    color: green;
}

 

The specificity values would be:

Specificity ID

These are all simple cases, but CSS rules will usually be more complicated, and so you'll have multiple ID, classes and elements. But the same principles apply: Whichever rules has the highest value in the right-most column has precedence.