Most Developers Fail This Simple CSS Interview Question (CSS Specificity)
Tags: css, webdev, tutorial, beginners
Published: 2023-04-24 14:34:14

>  Think CSS is easy? Think again!

![Photo by Maranda Vandergriff on Unsplash](https://miro.medium.com/v2/resize:fit:720/format:webp/1*useg7xOof7Qr4PZMtvta5w.png)

## The Test

Given the following HTML and CSS code, do you know what would be the **color** of the text **‘test’**?
```html
    <body>
        <div class="hello">
            <p class="abc">test</p>
        </div>
    </body>
```
```css
    p.abc {
        color: purple;
    }
    .hello p {
        color: red;
    }
    .abc {
        color: blue;
    }
    p {
        color: green;
    }
```
>  Take a second to think through

---

*Intention space left blank so that you don’t accidentally see the answer*

---

*More intentional blank space*
>  Please give it a shot before looking at the answer

---

If you had guessed the color was **red**, then you are **correct!** You would also have a solid understanding of **CSS Specificity.**

You can have a quick confirmation of the answer through this [**codepen.**](https://codepen.io/ambroseliew/pen/jOpzXpj)
{% codepen https://codepen.io/ambroseliew/pen/jOpzXpj %}

## But why?

If you did not manage to get the correct answer or understand why the text color was **red**, you can [check out this other article where I teach **CSS Specificity** in detail here.](https://dev.to/morninglit/stop-writing-important-in-your-css-code-and-do-this-instead-2knd)
{% embed https://dev.to/morninglit/stop-writing-important-in-your-css-code-and-do-this-instead-2knd %}

Understanding this concept is important because concepts like this are always being used if you are a **Web Developer,** and especially so if you are a **Frontend Developer.**

---

## Walkthrough

But to break it down further, the **CSS Specificity** for the rule that applies the color **purple,** and the other rule that applies the color **red**, both have a specificity of **0–0–0–1–1.** This is because they both have **1 Class Selector** and **1 Type Selector.**

Meanwhile, for the rule that applies the color **blue** has a **CSS Specificity** of **0–0–0–1–0,** because it only has **1 Class Selector.** While, the rule that applies the color **green** has a **CSS Specificity** of **0–0–0–0–1,** because it only has **1 Type Selector.**

Thus, the rules that have the **highest CSS Specificity value**, are the rule that apply the color **purple** and the other rule that apply the color **red**.

But 2 CSS rules with the same **CSS Specificity value!** How do we know which to apply?

This is where the **‘Cascading’** in **Cascading Style Sheets (CSS)** comes into play. What this means is that whichever rule is applied the **latest** (the rule that is found at the **bottommost**) will be the one that is applied. In this case, it would be the rule that applies the color **red**.

## Bonus

We can even take it a step further by adding another CSS rule to the list.
```css
    .hello.hello {
        color: pink;
    }
```
What do you think would the outcome of the color be? **Red** or **pink?**

And yes, you can stack **Class Selectors** (and **ID Selectors**) to increase the **specificity**. Thus, the CSS Specificity for this rule would be 0–0–0–2–0. This value is definitely higher than all the other rules so far.

However, if you add this CSS rule to the existing CSS code so far in the [**codepen**](https://codepen.io/ambroseliew/pen/jOpzXpj), you would realize that the color of the text is still **red!** Why is that?

It is because rules that **directly target elements** will always take priority over rules that **target the parents** (aka **inherited styles**).

Thus, in this case, since this CSS rule targets the **parent** instead of the **actual p tag itself,** it would be overwritten by the other more specific CSS rules. And yes, the CSS rule that applies the color **green** would also overwrite this **pink** color.

---

If you felt that you have learned something new, do feel free to **follow** 🥰, drop a **react 💖** or write a **comment** ✍️!
It helps makes me create and share more valuable content for **you** to become a better **Web Developer!** 🤗