Pseudo-classes in CSS have a specificity that is treated similarly to class selectors. They are more specific than type selectors but less specific than ID selectors. Understanding this helps predict which styles will apply when multiple rules target the same element.

Specificity Rules for Pseudo-Classes

1
Pseudo-classes (e.g., :hover, :focus, :nth-child()) count as a single class in specificity calculations.
2
Type selectors (e.g., div, p) and pseudo-elements (e.g., ::before, ::after) have lower specificity than pseudo-classes.
3
ID selectors have higher specificity than pseudo-classes.
4
Inline styles override pseudo-classes regardless of specificity.

Example: Pseudo-Class Specificity

Here, the first <p> changes to orange on hover because the :hover pseudo-class has higher specificity than the type selector. The second <p> with an ID stays red since ID selectors override pseudo-classes.

Best Practices

1
Use pseudo-classes to enhance interactivity without unnecessarily increasing specificity conflicts.
2
Combine pseudo-classes with classes or IDs for precise targeting.
3
Avoid over-chaining selectors to keep specificity manageable.
4
Test across browsers to ensure expected style application.

Difficulty: 6/10

Topics: CSS specificity, selector precedence, pseudo-class weighting

Scenario Questions

0-2 years experience

1
You’re trying to style a button with :hover, but it’s not working — the base button style from a library is overriding it. What’s the most likely cause, and how would you fix it without using !important?
2
You wrote a rule like li:hover { color: red; } and another like .active li { color: blue; }. When you hover over an active list item, which color wins? Why?

2-5 years experience

1
A user reports that the dropdown menu’s :focus styles aren’t showing up on mobile — you’ve checked the CSS and it looks correct. What’s your debugging process, and how might specificity be involved?
2
Your team’s design system uses :nth-child(odd) for alternating row colors, but now a new component is injecting dynamic content that breaks the pattern. How do you diagnose whether specificity or structural changes are the root cause?

5-8 years experience

1
You’re designing a reusable card component that needs to support both :focus-within and :has() for accessibility, but legacy browsers don’t support :has(). How do you architect the CSS to maintain visual consistency while avoiding specificity wars across the component tree?
2
Your CSS architecture uses utility classes heavily, but now you need to add state-driven styles like :disabled or :invalid for form fields. How do you balance reusability, maintainability, and specificity without creating brittle overrides?

8+ years experience

1
You’re leading a migration from a legacy CSS framework that relied on !important everywhere to a modern CSS-in-JS system. How do you handle the technical debt of pseudo-class specificity conflicts that were buried under global overrides, and what long-term governance do you put in place?
2
Your company has 12 product teams using a shared design system, but each team has their own CSS layer that injects pseudo-class styles. How do you design a specificity governance model that prevents visual regressions during independent deployments without stifling autonomy?

Follow-up Questions

❓What if you have two conflicting pseudo-classes targeting the same element?
❓How would you debug a hover state that isn’t applying even though the selector looks right?
❓Can you explain why :not() doesn’t increase specificity the way you might expect?