CSS specificity - What overwrites what

Introduction

We access elements we want to style in different ways, depending on what we want to style. Tags for general styling, classes for a group of elements, and IDs for single elements. But sometimes we need to overwrite a particular set of elements and it's useful to know how to target them as best as we can.

Sometimes you'll need to overwrite something that you don't have a complete view of (eg. spaghetti code in a large team) or complete access to (eg. bought WordPress theme). Developers usually tackle this by adding !important. That is not a good idea.

!important should only be used as a last resort.

At first, you have just one !important, then you write another one, to overwrite the previous one and so on and on. Try to force your CSS to be applied differently - by knowing the specificity rules.

Specificity rules are a way that the browser decides which of the conflicting CSS rules pointing to the same element will apply.

Here you have a graph, displaying specificity rules. On the left, there are rules depending on a selector (eg. tag, ID). On the right, there are rules, based on where the CSS style is applied.

At the top, they don't impact one another. However, when you start applying CSS rules inline, it collides with selector-applied rules. CSS applied inline, has higher specificity than the one, applied by any ID.

Below, I'll do a review example for each of the cases, so you can check it yourself. Each time, I'll compare 2 adjacent selectors/CSS positions.

Colors on the graph correspond with the assigned text color. Selectors and CSS usage colored gray, are not included in the comparison.

Based on the selector

You probably know that style, applied by ID overwrites style applied with class or tag. And that !important rules them all.

But there are few other rules mixed in-between. For example, a more extensively defined rule trumps the more basic one.

We will compare CSS selectors, listed bellow:

1. tag vs. class
2. 1 class vs. 2 classes on the same element
3. 2 classes on the same element vs. parent class + child class
4. parent class + child class vs. ID
5. ID vs. parentID + child class
6. parent ID + child class vs. parent ID + child ID
7. class with !important vs. parent ID + child ID
8. class with !important vs. ID with !important

---

tag vs. class

Tags are the easiest to overwrite.

CODE

HTML

<div class="class-over-tag">The 1st algorithm which was ever processed by a machine was written by the legend Ada Lovelace.</div>

CSS

.class-over-tag {
    color: darkgreen;
}

div {
    color: brown;
}

RESULT

---

1 class vs. 2 classes on the same element

More classes on the same element have a higher specificity than just a single class.

CODE

HTML

<div class="one-class another-class">Ever played Assasin’s Creed? If you have, you will be surprised to know that the producer of Assassin’s Creed is a programmer, Jade Raymond.</div>

CSS

.one-class.another-class {
    color: darkblue;
}

.one-class {
    color: darkgreen;
}

RESULT

---

2 classes on the same element vs. parent class + child class

2 classes on the same element have the same specificity as the class on the parent and the class on the child. That means the latter one overwrites the previous one. Here you can see both options:

CODE A

HTML

<div class="parent-class">
    <div class="child-class second-child-class">Sara Haider is currently working as a software engineer at Twitter. Known for her programming skills, Sara specializes in Android App development.</div>
</div>

CSS

.child-class.second-child-class {
    color: darkblue;
}

.parent-class .child-class {
    color: lightgreen;
}

RESULT A

CODE B

HTML

<div class="parent-class">
    <div class="child-class second-child-class">Sara Haider is currently working as a software engineer at Twitter. Known for her programming skills, Sara specializes in Android App development.</div>
</div>

CSS

.parent-class .child-class {
    color: lightgreen;
}

.child-class.second-child-class {
    color: darkblue;
}

RESULT B

---

parent class + child class vs. ID

Selecting an element directly by ID has a higher priority than combining parent and child class (or two classes on the said element).

CODE

HTML

<div class="parent-class">
    <div class="child-class" id="parent-child-vs-id">Corrinne Yu is known for her contribution to some famous games like Borderlands, Zombie, Unreal Engine 3 and Brothers in arms. Her most famous work is her contribution to the 2012 smash-hit game, Halo 4. She has also won a national award in 2009 for Nuclear Physics research.</div>
</div>

CSS

#parent-child-vs-id {
    color: lightblue;
}  

.parent-class .child-class {
    color: lightgreen;
}

RESULT

---

ID vs. parentID + child class

CODE

HTML

<div id="parent-id">
    <div class="child-class" id="child-id">The reason you are addicted to iPhone games is Amanda Wixted.</div>
</div>

#parent-id .child-class {
    color: purple;
}

#child-id {
    color: lightblue;
}

RESULT

---

parent ID + child class vs. parent ID + child ID

CODE

HTML

<div id="parent-id-1">
    <div class="child-class" id="child-id-1">Tracy Chou is the finest example of how good can females are at diverse programming needs.</div>
</div>

CSS

#parent-id-1 #child-id-1 {
    color: deeppink;
}

#parent-id-1 .child-class {
    color: purple;
}

RESULT

---

class with !important vs. parent ID + child ID

CODE

HTML

<div id="parent-id-2">
    <div class="important-class" id="child-id-2">
        Ada has the honor of being the first programmer in the world but other woman programmers are not far behind.
    </div>
</div>

CSS

.important-class {
    color: orange!important;
}
#parent-id-2 #child-id-2 {
    color: deeppink;
}

RESULT

---

class with !important vs. ID with !important

CODE

HTML

<div id="important-id" class="important-class">Programming is a fascinating career option in today’s world. It has mystery, glamor, and money provided you do hard work to achieve the best.
    However, it is a field dominated by males. Though, there are many female programmers who have made names for themselves.</div>
</body>

CSS

#important-id {
    color: yellow !important;
}
.important-class {
    color: orange !important;
}

RESULT

---

---

Based on the usage of CSS

CSS specificity based on where did we included our style is pretty straightforward:

• inline style is the strongest
• internal style beats included style
• if both styles are included the same way, the latter one prevails

Unless you have a good reason, I don't suggest you use inline or internal style. If you want to have your code clean and neat, always write your styling rules in separated CSS files. It's still good to know how this works.

We will compare CSS usages, listed bellow:

1. 2 included stylesheets
2. included stylesheet vs. internal style
3. internal style vs. inline style
4. inline style vs. ID
5. inline style vs. ID wih !important

2 included stylesheets

When both styles are included the same way, the latter one prevails. In this case, we use 2 external stylesheets. In the first one, we set the text color to 'green' and that gets overwritten by the second stylesheet, which sets the text color to 'blue'. As you can see in the image below, the text is blue. But in the first stylesheet, we also set a green, 2px wide border. In the second stylesheet, we do nothing to change that, so the border style from the first file is used.

CODE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="included-style">
    Grace Murray Hopper was one of the first programmers of the Harvard Mark I computer. She invented the first compiler for a computer programming language and the one of those who popularized the idea of machine-independent programming languages.
</div>
</body>
</html>

style1.css

.included-style {
    color: green;
    border: solid green 2px;
}

style2.css

.included-style {
    color: blue;
}

RESULT

Included stylesheet vs. internal style

If we include a CSS file, we can easily overwrite its rules with the internal style, that is written in the <head> section of our HTML file. In the included stylesheet, we set the text to blue, but we overwrite this inside the <style> tags and we set it to red.

CODE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">

    <style>
        .included-vs-internal {
            color: red;
        }
    </style>
</head>
<body>

<div class="included-vs-internal">
    Lois Mitchell Habit was one of the ten-person team at IBM that developed FORTRAN, the first successful high-level programming language.
</div>

</body>
</html>

style2.css

.included-vs-internal {
    color: blue;
}

RESULT

internal style vs. inline style

The most powerful way to use some style is to write it inline. That means you write it directly on the element. The only way, you can overwrite that rule, is by !important. That means that inline style with added !important is impossible to overwrite. You should use inline styles with caution, otherwise, you can create a big mess.

Here we set the text color to red, but with an inline style, we changed it to orange.

CODE HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .internal-vs-inline {
            color: red;
        }
    </style>
</head>
<body>

<div class="internal-vs-inline" style="color: orange">
    Barbara Liskov (Born 7 Nov 1939) is one of the first women to be granted a doctorate in computer science in the United States and is a Turing Award winner who developed the Liskov substitution principle.
</div>
</body>
</html>

RESULT

Inline style vs. ID

Inline style is also able to overwrite the ID. If we set the text color to light blue with the ÌD selector and then add color: orange as an inline style, our text will be orange.

CODE HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #not-stonger-id {
            color: lightblue;
        }
    </style>
</head>
<body>
<div id="not-stonger-id" style="color: orange">
    Frances Elizabeth Allen was the first female IBM Fellow and in 2006 became the first woman to win the Turing Award.
</div>

</body>
</html>

RESULT

Inline style vs. !important

However, if add !important to the rule, written as internal CSS, that will prevail before the inline style.

Code is almost the same, we only added !important... :

CODE HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #not-stonger-id {
            color: lightblue !important;
        }
    </style>
</head>
<body>
<div id="not-stonger-id" style="color: orange">
    Frances Elizabeth Allen was the first female IBM Fellow and in 2006 became the first woman to win the Turing Award.
</div>

</body>
</html>

RESULT ...but as you can see, the result is different:

CONCLUSION

In this post, you got to knew the rules, by which CSS is applied and its specificity. That way, next time you'll be able to avoid adding !important when your CSS is not behaving as you expect it to. Not only that, you'll understand why it behaves the way it does and you'll be able to fix it.

The text used as a placeholder in the HTML was taken from: techworm and technotification