CSS Specificity Hierarchy

CSS Style Prioritization 

Sometimes your HTML might receive a number of different styles that conflict with each other, for example, you’ve created a class that makes your h2 heading blue, but your element’s CSS property sets the h2 colour to red. Since your paragraph copy can only be one colour, which of these will take precedence?

We’ll go over how different CSS declarations are prioritized in this blog.

Before we get into that, let’s go through some of the main ways that CSS styles can be applied, and some examples of each:

• In-line styling
• CSS Selectors In Style Blocks
• Classes
• Variables
• ID attributes
• Attribute selectors

TL;DR - take me to the hierarchy of CSS styles list.

In-Line Styling

In-line styling allows you to change the style of your HTML elements directly in the HTML element. In-line styling only applies to the individual element that you add it to.

For example, if we were to set an h2 element’s colour to red, we can use the color style property using in-line styling like this:

CSS Selectors In Style Blocks

Style blocks are a better way to apply CSS than in-line styling.

You can use style tags to create a style block that you can add a CSS selector to.

The CSS selector in the style block allows you to create rules that can be applied to all elements.

For example, if wanted all h2s in our document to be red, we can create a style rule like this, between the style tags:

h2 {
color: red;
}

Classes

Another way to style content using CSS is using CSS classes.

CSS classes are reusable styles that you can add to multiple HTML elements. They’re added between the style tags, and then you need to apply the class to the individual HTML elements.

Here’s an example of a CSS class between style tags:

  .red-text {
    color: red;
  }

You then need to apply the class to the individual HTML elements, like this:

Variables

CSS Variables allow you to change many CSS style properties at once by updating only one value.

CSS variables look like this:

element {
--main-bg-color: red;
}

This will create a variable named --main-bg-color and assign it a value of red that you can use in other places in your CSS to change the value of other properties containing main-bg-color to red.

After you create your variable, you can give its value to other CSS properties by referencing the name you gave it. This is done inside a var() function:

element {
  background-color: var(--main-bg-color);
}

The selector you give to a rule defines where it can be used. Because of this it’s common / best practice to define custom properties on the :root pseudo-class so it can be applied globally across your entire HTML document.

You can then overwrite these variables at :root by setting them again within a specific selector.

A benefit of using variables is that you can store a property in one place and reference it in a lot of other places without having to do a global search and replace to update it in a complex or large website.

Another benefit is that it can make it easier for someone reading the CSS to quickly understand what the function is updating, than for example a hex code.

NOTE: Some browsers, such as Internet Explorer do not support CSS variables.

ID Attributes

id attributes can also be styled using CSS. ids’ aren’t reusable and should only be applied to one element. To style using an id attribute, between your style tags, style your id attribute like this:

  #contact-form {
    background-color: red;
  }

Then you’ll need to add this ID to the HTML element, like so:

Attribute Selectors

Another type of CSS selector you can use to style custom groups of elements are attribute selectors.

Attribute selectors match and style elements with a specific attribute value. For example, the this changes the color of all elements with the attribute type and corresponding value of title:

[type='title'] {
  color: red;
}

Hierarchy of CSS Styles

When it comes to how CSS is prioritized, here are some rules that are followed:

1. Classes override CSS selectors in style blocks.

Classes override CSS selectors in style blocks such as body element CSS declarations.

2. Last declarations in the style section are prioritized.

If there are 2 classes in the style section, the last declaration takes priority. Since browsers read CSS from top to bottom in order of their declaration, the browser will use whichever CSS declaration is last.

The order of the class attributes in the HTML tag’s element class doesn’t matter, the browser still looks at the declaration order and not the order of their use.

NOTE: Applying multiple class attributes to a HTML element is done with a space between them like this:

class="class1 class2" e.g.

3. An id has a higher importance than a class.

If both are applied to the same element and have conflicting styles, the styles of the id will be applied. It doesn't matter where you declare ids in relation to other classes, since the id attribute always takes precedence. id declarations override class declarations, regardless of where they’re declared in your style element CSS.

4. Inline styles trump all the above.

5. Use !important to override all styles.

This is especially handy when you’re using CSS libraries that might accidentally override your own CSS.

When you need to be 100% sure that an element has specific CSS, you can use !important. E.g.

.red-text {
color: red !important;
}