When styling your website, you may apply multiple CSS declarations to the same element. In that case, the browser determines which declarations are the most relevant to an element and applies those.

This relevance — or, specificity — is based on the matching rules of CSS selectors. CSS selectors are modifiers that tell a browser which elements to style with CSS. There are different selector types, each with their own syntax and level of specificity.

Free Intro Guide to HTML & CSS [Download Now]

The following selector types rank from having the highest specificity to the lowest:

  1. ID selectors: These select an element based on its ID attribute and have the syntax #idname.
  2. Class selectors, attribute selectors, and pseudo-class selectors:
    a) Class selectors select all elements in a CSS class and have the syntax .class name.

    b) Attribute selectors selects all elements that have a given attribute and have the syntax [attr].

    c) Pseudo-class selectors select elements only when in a special state, like visited or hover, and have the syntax selector:pseudo-class.
  3. Type selectors: These select all HTML elements that have a given node name and have the syntax element.

Note: The universal selector (*) has no effect on specificity.

If multiple declarations with equal specificity, like a class selector and attribute selector, are made on the same element, then the last declaration (ie. the declaration listed later in the stylesheet) will be applied to the element.

There's one other major rule to keep in mind when coding the HTML and CSS of your website: the !important rule. This is the exception to all the specificity rules mentioned above. Let’s take a closer look at what it means below.

Although easier than following the many rules of specificity when combining property values, using the !important property is considered a bad practice.That’s because it breaks the natural cascading of stylesheets, which makes maintaining and debugging your website much more difficult.

However, there are specific use cases in which using the !important property is ideal. One such use case is defining utility classes. Chris Coyier on CSS Tricks uses the button class as an example.

Please note: I’ll be using the W3Schools Online Code Editor to create the examples below based on Coyier's code. You can click any of the Source links to see the full code snippet for an example and create your own.

Say you want any element targeted by the button class to look like the same button: red background, white font color, solid black border. Without the !important property, you’d use the following code to make a link look like a button.

Here’s the HTML:

 

 

   <a href="#" class="button">Do Thing</a>

Here’s the CSS:

 

 

   .button {

   background: red; 

   color: white;

   padding: 3px;

   border-radius: 5px;

   border: 1px solid black;

}

Here’s the result:

<a> element defined by CSS class selector without the !important property to look like a button

Source

Now let’s say you keep building out your web page. At some point, you add a new section with the ID “content” to your HTML. This section contains another link with the button class. You also add another rule to your CSS, defining all <a> elements with the ID name “content” to have a dotted blue border. You’d have the following code.

Here’s the HTML:

 

 

   <a href="#" class="button">Do Thing</a>

<section id="content">

   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p>

</section>

Here’s the CSS:

 

 

   .button {

   background: red; 

   color: white;

   padding: 3px;

   border-radius: 5px;

   border: 1px solid black;

}

#content a {

   border: 1px dotted blue;

}

Here’s the result:

<a> elements defined by a class selector and ID selector respectively so different CSS rules apply according to specificity

Source

Because an ID selector has a higher specificity than a class selector, the CSS style of the selector #content a takes precedence over the CSS style of the selector .button. That’s why the second <a> element has a blue dotted border, not a solid black one.

A scenario like this is inevitable, whether you’re building a site from scratch or using a framework like Bootstrap CSS. The larger the volume of code you’re working with, the harder it is to keep track of the specificity of your CSS selectors.

You can avoid the style inconsistencies of the above-mentioned scenario on your site by using the !important property. Let’s look at how exactly to use this property below.

How to Use Important in CSS

Using the !important rule in CSS is easy. You just have to add !important at the end of the line, immediately before the semicolon. So the syntax would be:

 

 

   element {

style property !important;

}

Let’s take a look at how the CSS for the example above changes when adding the !important rule.

The HTML stays the same:

 

 

   <a href="#" class="button">Do Thing</a>

<section id="content">

   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p>

</section>

The CSS becomes:

 

 

   .button {

   background: red            !important;

   color: white               !important;

   padding: 3px               !important;

   border-radius: 5px         !important;

   border: 1px solid black    !important;

}

#content a {

   border: 1px dotted blue;

}

The result is:

<a> elements defined by CSS class selector and ID selector respectively but with the !important property to look like the same button

Source

You’ll notice how both <a> elements look identical thanks to the !important rule.

But let’s say you change the color scheme of your website or you don’t want all elements with the button class to look the same. Whatever the reason, you may want to override the !important rule in your CSS. Let’s look at how below.

Why do these two methods work? Because of the rules of specificity. When two declarations using the !important rule are applied to the same element, the declaration with a greater specificity or the declaration defined last will be applied. You might remember these rules from the introduction, but it’s important to understand they apply to declarations using the !important rule as well as declarations not using the rule.

Rather than override the !important property in CSS with another !important property, it is ideal to rewrite the rule and avoid using the property altogether. But sometimes this isn’t possible.

Take user stylesheets, for example. Using a custom user stylesheet, a reader can override styles of the website according to their wishes. A reader might, for example, increase the font size or change the color of typography on the page to enable them to see the content better.

Since a user-defined stylesheet will override an author stylesheet regardless of specificity, a reader might be able to add CSS rules without the !important tag. However, if the author stylesheet is using the !important rule to define its font size or color, then the !important rule will be necessary in the user stylesheet.

Let’s continue using the same button example from above. Say, my website already had the !important rules applied to the button class. But now I do want all <a> elements with the ID name “content” to have a dotted blue border.

I should simply rewrite the code, removing all !important tags from my CSS. But let’s say I’m on a time crunch and looking for a quick fix. Then I could simply add the !important tag to the CSS ID selector. Then both declarations would be using the !important property and, because ID selectors have a higher specificity then class selectors, the <a> element in the content section would have a blue dotted border.

The HTML stays the same:

 

 

   <a href="#" class="button">Do Thing</a>

<section id="content">

   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p>

</section>

The CSS becomes:

 

 

   .button {

   background: red            !important;

   color: white               !important;

   padding: 3px               !important;

   border-radius: 5px         !important;

   border: 1px solid black    !important;

}

#content a {

   border: 1px dotted blue !important;

}

The result is:

Two <a> elements defined by !important property and selector types of different specificity to display with different CSS rules

Source

Now let’s say I want all buttons on my website to have a blue dotted border. Again, I should simply rewrite the code but I can use the !important tag for a quick fix. Using the same class selector .btn with a new rule for the blue dotted border and an !important tag, I can simply add it after the existing rule in the stylesheet. Because it comes later, it has higher specificity and will be applied to elements with the .btn class.

The HTML stays the same:

 

 

   <a href="#" class="button">Do Thing</a>

<section id="content">

   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p>

</section>

The CSS becomes:

 

 

   .button {

   background: red            !important;

   color: white               !important;

   padding: 3px               !important;

   border-radius: 5px         !important;

   border: 1px solid black    !important;

}

.button {

   border: 1px dotted blue !important;

}

Here’s the result:

Two <a> elements defined by same selector and !important property have formatting of last rule in stylesheet

Source

Using the !important Property in your CSS

While !important declarations should only be rarely used in code, it’s still necessary to understand what this property is and how to use it. Maybe you’ll need to use the !important rule in your user stylesheets. Maybe you’ll take over a website that contains instances of the rule. Whatever the reason, becoming familiar with the !important property is useful step in learning HTML and CSS.

New Call-to-action

 css introduction

Originally published May 19, 2020 7:00:00 AM, updated May 19 2020

Topics:

Bootstrap CSS