Most Developers Fail This Simple CSS Interview Question (CSS Specificity)

#css #webdev #tutorial #beginners

Think CSS is easy? Think again!

The Test

Given the following HTML and CSS code, do you know what would be the color of the text ‘test’?

    <body>
        <div class="hello">
            <p class="abc">test</p>
        </div>
    </body>

    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.

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.

Stop Writing !important in your CSS Code, and Do This Instead!

Ambrose Liew ・ Apr 24 ・ 3 min read

#webdev #css #html #tutorial

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.

    .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, 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! 🤗