Bird
Raised Fist0
CSSmarkup~5 mins

Debugging specificity issues in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Sometimes CSS styles don't show up because other styles are stronger. Debugging specificity helps find and fix these conflicts.

When a style you wrote is not applying to an element.
When multiple CSS rules target the same element but only one works.
When you want to understand why a certain color or font is not showing.
When you want to fix layout or design problems caused by conflicting styles.
When you add new CSS but it doesn't seem to change anything.
Syntax
CSS
/* No special syntax, but understanding selector types helps */
selector { property: value; }

Specificity depends on the type of selector: inline styles, IDs, classes, elements.

More specific selectors override less specific ones.

Examples
ID selectors (#id) are more specific than class selectors (.class), which are more specific than element selectors (p).
CSS
p { color: blue; }
.class { color: red; }
#id { color: green; }
The selector with the class (.container p) is more specific than just div p, so its font size wins.
CSS
div p { font-size: 16px; }
.container p { font-size: 18px; }
The class selector p.special is more specific than just p, so margin: 5px applies.
CSS
p { margin: 10px; }
p.special { margin: 5px; }
Sample Program

This example shows three paragraphs. The first uses a simple element selector, so text is blue. The second uses a class, which is more specific, so text is red. The third uses an ID and a class; the ID is most specific, so text is green.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Debug Specificity</title>
  <style>
    p { color: blue; }
    .highlight { color: red; }
    #unique { color: green; }
  </style>
</head>
<body>
  <p>This text is blue.</p>
  <p class="highlight">This text is red because of the class.</p>
  <p id="unique" class="highlight">This text is green because ID is more specific.</p>
</body>
</html>
OutputSuccess
Important Notes

Use browser DevTools (right-click element -> Inspect) to see which CSS rules apply and their specificity.

Inline styles (style="...") have the highest specificity but should be used sparingly.

Adding !important can force a style but can make debugging harder; use it only when necessary.

Summary

Specificity decides which CSS rule wins when multiple rules target the same element.

ID selectors are stronger than class selectors, which are stronger than element selectors.

Use browser tools to check and fix specificity problems easily.

Practice

(1/5)
1. Which CSS selector has the highest specificity?
easy
A. An ID selector like #header
B. A class selector like .menu
C. An element selector like div
D. A universal selector like *

Solution

  1. Step 1: Understand selector types and their specificity

    ID selectors have higher specificity than class or element selectors.

  2. Step 2: Compare the given selectors

    #header is an ID selector, which beats class .menu and element div.

  3. Final Answer:

    An ID selector like #header -> Option A

  4. Quick Check:

    ID selector > class selector > element selector [OK]
Hint: ID selectors always outrank class and element selectors [OK]
Common Mistakes:
  • Thinking class selectors are stronger than ID selectors
  • Confusing element selectors with class selectors
  • Ignoring the universal selector's low specificity
2. Which of these CSS rules is correctly written to increase specificity by using multiple classes?
easy
A. .btn, .primary { color: blue; }
B. #btn.primary { color: blue; }
C. .btn .primary { color: blue; }
D. .btn.primary { color: blue; }

Solution

  1. Step 1: Understand how multiple classes increase specificity

    Writing selectors like .btn.primary targets elements with both classes, increasing specificity.

  2. Step 2: Analyze each option

    .btn.primary { color: blue; } combines two classes without space, increasing specificity. .btn .primary { color: blue; } has a space, meaning descendant selector, which is less specific.

  3. Final Answer:

    .btn.primary { color: blue; } -> Option D

  4. Quick Check:

    Multiple classes without space increase specificity [OK]
Hint: Combine classes without spaces to increase specificity [OK]
Common Mistakes:
  • Using spaces between classes which creates descendant selectors
  • Mixing ID and class selectors incorrectly
  • Using commas which separate selectors instead of combining
3. Given the CSS rules below, what color will the <p class='text'> element display?
p { color: red; }
.text { color: green; }
#main p { color: blue; }

Assume the paragraph is inside an element with id='main'.
medium
A. Blue
B. Green
C. Black (default)
D. Red

Solution

  1. Step 1: Identify selectors affecting the paragraph

    The paragraph matches p, .text, and #main p selectors.

  2. Step 2: Compare specificity of each selector

    p has lowest specificity, .text is higher, and #main p has highest specificity because of the ID.

  3. Final Answer:

    Blue -> Option A

  4. Quick Check:

    ID selector beats class and element selectors [OK]
Hint: ID selectors override class and element selectors [OK]
Common Mistakes:
  • Choosing class color over ID selector color
  • Ignoring the element's parent ID context
  • Assuming order of rules always wins over specificity
4. You have these CSS rules:
.btn { background: yellow; }
#submit { background: green; }
.btn.primary { background: red; }

The button has class='btn primary' and id='submit'. Which background color will it show and why?
medium
A. Red, because multiple classes increase specificity
B. Yellow, because class selectors are enough
C. Green, because ID selectors have highest specificity
D. No background color due to conflict

Solution

  1. Step 1: Identify selectors and their specificity

    #submit is an ID selector, highest specificity. .btn.primary combines two classes, less specific than ID.

  2. Step 2: Determine which rule wins

    The ID selector #submit overrides class selectors, so background is green.

  3. Final Answer:

    Green, because ID selectors have highest specificity -> Option C

  4. Quick Check:

    ID selector beats multiple class selectors [OK]
Hint: ID selectors always override class selectors, no matter how many classes [OK]
Common Mistakes:
  • Thinking multiple classes beat an ID selector
  • Ignoring the ID selector's power
  • Assuming order of rules decides the winner
5. You want to override a third-party CSS rule .card { border: 1px solid black; } but cannot change their CSS file. Which selector below will reliably override their border style without using !important?
hard
A. div.card
B. #main .card
C. .card.primary
D. .card, .primary

Solution

  1. Step 1: Understand the original selector specificity

    The original selector .card is a single class selector.

  2. Step 2: Choose a selector with higher specificity

    #main .card combines an ID and a class, which has higher specificity than a single class.

  3. Step 3: Verify other options

    div.card combines element and class, less specific than ID. .card.primary combines two classes, still less than ID. .card, .primary is two separate selectors, no increased specificity.

  4. Final Answer:

    #main .card -> Option B

  5. Quick Check:

    ID + class selector beats single class selector [OK]
Hint: Add an ID selector before class to increase specificity [OK]
Common Mistakes:
  • Using multiple classes but no ID, which may not override
  • Adding element selectors only, which have low specificity
  • Using commas which separate selectors instead of combining