CSS Specificity (Taming the beast)

A follow-up question that's often asked after by interviewers wanting to dive deeper into your CSS knowledge is "What is specificity, and how does it work?".

I'll admit — I've stumbled on this question before, mostly because I never really stopped to think about how specificity actually works. So let's dive into it and explain CSS specificity in a little more detail...

TL;DR

CSS specificity determines which styles are applied when multiple rules target the same element. It follows a strict hierarchy:

Hierarchy of Specificity (Highest to Lowest)

• Inline styles → (1, 0, 0, 0)
• ID selectors → (0, 1, 0, 0)
• Class, pseudo-class, attribute selectors → (0, 0, 1, 0)
• Element, pseudo-element selectors → (0, 0, 0, 1)

If two rules have the same specificity, the one that appears later in the CSS file takes precedence. Inline styles will override external stylesheets unless overridden by !important, which should generally be avoided due to maintainability issues. Understanding specificity is crucial for debugging CSS conflicts, structuring maintainable styles, and working efficiently with CSS frameworks like Bootstrap or Tailwind.

Why This Question Matters

Interviewers love to ask about CSS specificity because it reveals how well you understand CSS mechanics, how to troubleshoot issues, and write maintainable styles. Front-end developers need to manage CSS efficiently without resorting to hacks that make debugging a nightmare.

Poor specificity handling leads to:

• Styles not applying as expected
• Excessive use of !important
• Unscalable, fragile stylesheets

A strong understanding of specificity shows you can write maintainable, predictable CSS.

A Poor Answer

"Specificity is just about how strong a CSS rule is. If something doesn’t work, I just add !important or another class to fix it."

This example answer is vague and suggests a lack of deep understanding. Overusing !important is a red flag and can indicate that someone doesn't know how to manage their styles properly. Also, “just adding another class” could make things worse rather than solving the issue.

A Strong Answer

"CSS specificity decides which styles win when when multiple rules target the same element. It's calculated based on the type of selectors used: inline styles (1000), IDs (100), classes/attributes/pseudo-classes (10), and elements/pseudo-elements (1).

This answer is clear, structured, and demonstrates an understanding of specificity, the cascade, and best practices.

So, What is CSS Specificity?

Specificity is how CSS decides which rule should apply when multiple rules target the same element. Think of it like a ranking system for styles. Specificity is calculated using a four-part scoring system, often written as (A, B, C, D), where each letter represents a different type of selector:

• A – Inline styles (highest weight, 1,0,0,0)
• B – ID selectors (0,1,0,0)
• C – Class, attribute, and pseudo-class selectors (0,0,1,0)
• D – Element and pseudo-element selectors (0,0,0,1)

The higher the numbers, the stronger the rule. When specificity is tied, the rule that appears later in the CSS wins.

Example 1: Simple Selectors

h1 { color: blue; } /* (0,0,0,1) */        

• h1 is an element selector → (0,0,0,1)

.title { color: red; } /* (0,0,1,0) */        

• .title is a class selector → (0,0,1,0)
• Since (0,0,1,0) > (0,0,0,1) the class-based rule wins

Example 2: Multiple Selectors

#main .title p { color: green; } /* (0,1,1,1) */        

• #main is an ID selector → B = 1
• .title is a class selector → C = 1
• p is an element selector → D = 1
• Total specificity: (0,1,1,1)

section .title p { color: orange; } /* (0,0,1,1) */        

• section is an element selector → D = 1
• .title is a class selector → C = 1
• Total specificity: (0,0,1,1)
• Since (0,1,1,1) > (0,0,1,1), the first rule wins.

Digging Deeper: Follow-up Questions

How does specificity work with !important? !important overrides normal specificity rules, but if multiple !important rules conflict, specificity still applies. What’s the specificity of div#id.class:hover? ID (100) + Class (10) + Element (1) = (0,1,1,1) How does specificity interact with CSS frameworks like Bootstrap or Tailwind Frameworks often use low-specificity utility classes to keep styles predictable. Can you explain specificity conflicts with inherited styles? Inheritance doesn’t contribute to specificity, but direct declarations will always override inherited styles.Real-World Application

Parting Wisdom & Next Steps

• Avoid ID selectors unless absolutely necessary.
• Use class-based styles for consistency and maintainability.
• Leverage CSS methodologies like BEM or utility-first to minimise specificity conflicts.

?? Further Learning:

• MDN on Specificity
• CSS Tricks: Specificity Wars
• Try a Specificity Calculator to test different selectors.

Final Thoughts

If your styles aren't applying as expected, specificity is probably the culprit. Debug smartly, structure wisely, and keep !important to a minimum—unless you want Oscar to judge you.

Who Am I?

Hi! I’m Jason, a software developer who’s been building websites for over 20 years —whether that’s a good thing or not, I’ll let you decide!

In my search for a new job, during what’s been one of the toughest markets in ages, I’ve realised that many of my answers to front-end interview questions weren’t as deep as was required. Over the years, a lot of this knowledge has drifted away, partly due to frameworks abstracting the underlying technology, but mostly because I never actually needed to use it. Be honest… when was the last time you really had to know how the event loop worked?

I get it! These things are important. So, in an attempt to deepen my own understanding (and to help aspiring interviewees like you), I’ll be diving into the questions I’ve been asked, along with a few extras for good measure. If you found this helpful, follow me for more deep dives into front-end interview topics! Got an interview question you've struggled with? Drop it in the comments, and I'll break it down in a future post.