CSS Specificity Explained

Content:

When applying CSS, it’s possible that multiple conflicting rules apply to the same element.

In these situations, the CSS rules of specificity define how these conflicting rules apply. It’s important to understand CSS specificity, to ensure the intended styling is applied.

If you’re struggling to get a style to apply, it’s certainly possible these rules are responsible.

This article will take you through CSS specificity.

Calculating Specificity

When styles are applied, each selector in your CSS can be given a score. This score is broken down as follows:

Specificity breakdown
Each of these fields is assigned a value, based on the specified selector.

When two selectors apply to an element, their scores are compared, starting with the left-hand side of the chart.

For example, a selector containing 2 IDs will beat a selector containing 0 IDs and 4 classes. This is because IDs are counted first, as they appear to the left of classes.

Given that it’s unlikely an element will have 10 of any single selector type, the resulting value is often taken as a number.

specificity example

This selector has a score of 0112, sometimes written as 0,1,1,2. It’s worth pointing out though, that if an element did have 10 or more of a selector type, this way of scoring wouldn’t be appropriate. A score of 10 wouldn’t ‘bump-up’ the score in the column to the left, as it would in an actual number.

Large specificity example

The score here could be written as 0,2,10,4, not 0304 (which would be incorrect).

It’s not an occurrence that’s likely to come up often, but worth bearing in mind.

Let’s break this scoring down further, to identify exactly which selectors are counted in each column.

Element: Elements and Pseudo-Elements

Elements and pseudo-elements are the bottom-ranking elements, coming in on the right-hand box in the chart. Elements cover the range of HTML tags, such as button, while pseudo-elements are elements prefixed with ::, such as ::after. These have the lowest specificity.

Class: Classes and Pseudo-Classes

Classes and pseudo-classes come in position 3. Classes are prefixed with a ., while pseudo-classes are prefixed with :, such as :hover. Also included here are attributes, such as [class^="text-"].

ID: IDs

Next up in the hierarchy are IDs, in column 2. IDs are prefixed with a #. IDs warrant a higher score than classes, as an ID should only occur once on a web page.

Inline: Inline Styles

At the top of the tree (amongst the standard scoring, at least), are inline styles. Inline styles cover column number 1, and pretty much always come out on top. Inline styles are a sure-fire way to ensure your styling takes effect, with one exception we’ll look at later on.

Overriding Specificity

From time to time, it might be necessary to force a browser to use your styling, regardless of the specificity score.

To do this, add !important to the styling attribute to apply.

For example

<div id="header" class="content"></div>
#header {
    background-color: green;

.content {
    background-color: red !important;
}

you might expect the code here to produce a div with a green background. This is due to the ID #header selector having a higher specificity than the .content class selector.

However, the result actually looks like this.

Adding !important to the .content background-color attribute ensures it is given the highest priority, overriding any other styles which world usually apply.

This is considered a ‘nuclear option’, and should only be used if absolutely necessary, such as when working with external libraries you have no control over. You should avoid using this option in your own code – if you understand the rules, you won’t need it.

Other Quirks

There are a few other rules to note

  • The :not() selector, unlike other pseudo-classes, does not contribute to the score. The selectors inside the :not(), however, do contribute.
  • The catch-all selector * does not contribute to the score.

If you understand the rules of CSS specificity, you’re well on your way to creating stunning page styles using CSS.