Let’s say you’re building out a web page and want all your links to be hot pink to stand out from the other text on the page, which is black by default. For your internal links, you not only want to change their font color — you also want to bold them to add extra emphasis. This might improve the chances of visitors clicking on them and staying longer on your site.

To style these HTML elements on a web page, you need CSS selectors. CSS selectors are modifiers that define the elements you want to style with CSS. There are different types of CSS selectors, each with their own unique syntax that tell the browser which elements to apply the CSS to.

Sign Up Now: Free Website Optimization Course from HubSpot Academy

To continue our example above, let’s say you add your CSS selectors targeting all a[href] elements and the a[href] elements that contain your website name specifically (these are your internal links). You define them accordingly with the font-weight and font-color properties. But, when you go to preview your changes on the front-end of your site, you don’t see the correct formatting for your internal links. What’s the deal?

You likely broke one of the CSS specificity rules and, as a result, will have to backtrack in your code to try to fix the mistake. It’s a pain, but very common. CSS specificity is one of the most important — and difficult — concepts to learn in CSS.

In this post, we’ll explain what CSS specificity is and then walk through the rules so you can apply CSS correctly in your web project and avoid having to go bug hunting through your code.

Before we look at the different rules of CSS specificity, let’s clearly define the levels of specificity of each type of CSS selector. Below is what’s called the “specificity hierarchy.” It starts with selector types with the highest specificity to the lowest.

  1. ID selectors: ID selectors are the most specific. 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.
    d) These three selector types have equal specificity.
  3. Type selectors: These select all HTML elements that have a given node name and have the syntax element.
  4. Universal selectors: The universal selector (*) has no effect on specificity.

CSS Specificity Rules

There are a number of rules of CSS specificity to familiarize yourself with before you get started writing your HTML and CSS. Let’s look at them below

Rule 1: The CSS selector with higher specificity applies.

If an HTML element is targeted by multiple selectors, then the browser will apply the CSS rule of the selector with the higher specificity.

Say an element is targeted by an ID selector and a class selector. In that case, because the ID selector has the higher specificity, the CSS style of the ID selector will be applied to the element over the style of the class selector.

Let’s take a look at an example demonstrating this rule below.

Say, for example, you want the button elements to be maroon across your Bootstrap site. Then you’d use a class selector to define all elements under the button class to have a maroon background color (hex color code #80000) and a white font color (#FFFFFF). But you want the subscribe button on your homepage to be an exception so that it’s more eye-catching. Then you could use an ID selector to define the one button with the ID “homepage” to have a fuschia background color (#FF00FF) and a black font color (#000000). All Bootstrap buttons without the ID “homepage” will still follow the CSS rule of the class selector.

Here’s the CSS:

 

 

  #homepage {

   background-color: #FF00FF;

   color: #000000;

}

.btn {

   background-color: #800000;

   color: #FFFFFF;

}

 

Here’s the HTML:

 

 

 

  <button type="button" class="btn" id="homepage">Subscribe</button>

<button type="button" class="btn">Subscribe</button>

Here’s the result:

Two different button styles demonstrating rule of selector type with higher specificity winning

Image Source

Rule 2: If CSS selectors have equal specificity, then the last applies.

If multiple selectors are applied to the same HTML element and they have the same level of specificity, then the browser will apply the CSS rule of the selector that appeared later in the stylesheet.

Let’s take another look at the example above. Say you applied both selectors to your Bootstrap button elements, each with different rules for font and background colors, but the selectors were both class selectors. Then the latter one would apply.

Here’s the CSS:

 

 

  .btn {

   background-color: #FF00FF;

   color: #000000;

}

.btn {

   background-color: #800000;

   color: #FFFFFF;

}

 

Here’s the HTML:

 

 

  <button type="button" class="btn" id="homepage">Subscribe</button>

<button type="button" class="btn">Subscribe</button>

Here’s the result:

Same button styles demonstrating order of specificity rule

Image Source

Rule 3: Inline CSS has the highest specificity.

CSS can be written in three ways: inline, in the <head> section of an HTML doc, or in an external CSS stylesheet. Inline styling, otherwise known as the “embedded stylesheet,” has the highest specificity and automatically wins.

This makes sense considering the previous rule that shows order matters. Inline CSS is the closest to the HTML element, so it is more specific and is therefore applied. Let’s look at an example demonstrating this rule below.

Here’s the CSS from the <head> section:

 

 

  .btn {

   background-color: #FF00FF;

   color: #FFFFFF;

}

 

Here’s the HTML:

 

 

  <button type="button" class="btn" style="background-color: #800000">Subscribe</button>

<button type="button" class="btn">Subscribe</button>

Here’s the result:

Two different button styles demonstrating rule of specificity of inline styling

Image Source

How do you override specificity in CSS?

In CSS, the !important property is the exception to all the specificity rules mentioned above and therefore overrides all other declarations on an element.

Although you might be tempted to take advantage of this one rule, rather follow the many other rules of specificity when combining property values, don’t. Using the !important property is considered a bad practice because it breaks the natural cascading of stylesheets. This makes maintaining and debugging your website much more difficult, particularly if you work with a team of developers.

There are some use cases in which the !important property is okay to use, like when you’re defining utility classes, so we’ll briefly look at an example below.

Say you want any element targeted by the button class to look like the same button. Then you’d apply unique style properties with the .btn class selector. All good for now. In the course of building out your web page, you add a new section with the ID name “content” containing a 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 now have two selectors targeting the same HTML element. And, as we know, because an ID selector has a higher specificity than a class selector, the CSS style of the ID selector takes precedence over the CSS style of the class selector. The second <a> element would therefore have a blue dotted border instead of a solid black one. To avoid this and ensure that the style properties of the .btn class apply to all elements under that class name, regardless of the selector types or order, then you could add the !important property.

Here’s the CSS:

 

 

  .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;

}

 

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 result:

Two button styles demonstrating !important property exception

Image Source

Getting Specific with Your CSS

Understanding the rules of specificity is important for having complete control over your HTML and CSS. With this knowledge, formatting will show up like you expect so you won’t have to go searching for a mistake in your code.

New Call-to-action

 css introduction

Originally published Jul 8, 2020 7:00:00 AM, updated July 08 2020

Topics:

Bootstrap & CSS