Debugging specificity issues in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS rule will apply the red color to the paragraph?

Given the following HTML and CSS, which CSS selector will make the paragraph text red?

CSS

HTML:
<p class="text">Hello World</p>

CSS:
.text { color: blue; }
#main .text { color: green; }
.text.highlight { color: red; }

A .text { color: red; }

B #main .text { color: red; }

C .text.highlight { color: red; }

D p.text { color: red; }

💡 Hint

Think about which selector has the highest specificity and matches the element's classes.

The paragraph matches '.text' (specificity 0,1,0) for blue. '#main .text' (1,1,0) requires #main ancestor (absent). '.text.highlight' (0,2,0) requires 'highlight' class (absent). '.text { color: red; }' has the same specificity as the blue rule but comes later, so it overrides it.

🧠 Conceptual

intermediate

What is the specificity value of the selector #nav ul li.active a?

Calculate the specificity of the CSS selector #nav ul li.active a. Use the format (a,b,c) where:
- a = number of ID selectors
- b = number of class, attribute, and pseudo-class selectors
- c = number of element and pseudo-element selectors

A (0,2,4)

B (1,1,3)

C (1,2,3)

D (1,1,4)

💡 Hint

Count each type of selector carefully: IDs, classes, and elements.

The selector has 1 ID (#nav), 1 class (.active), and 4 elements (ul, li, a). So specificity is (1,2,4) if counting .active and any other class or pseudo-class, but here only one class. Actually, the correct count is 1 ID, 1 class, 4 elements, so (1,1,4).

❓ rendering

advanced

Which color will the button have when rendered?

Consider the following CSS and HTML. What color will the button text be when viewed in a browser?

CSS

HTML:
<button class="btn primary">Click me</button>

CSS:
button { color: black; }
.btn { color: blue !important; }
.primary { color: red; }

A Black

B Blue

C Red

D Default browser color

💡 Hint

Remember that !important overrides normal specificity rules.

The '.btn' class has 'color: blue !important', which overrides other color rules even if they have higher specificity. So the button text will be blue.

❓ accessibility

advanced

Which CSS selector is best to style focus state for accessibility?

You want to improve keyboard navigation by styling the focus state of links. Which selector correctly targets links when they receive keyboard focus?

A a:focus-visible

B a:hover

C a:active

D a:visited

💡 Hint

Focus styles should appear only when users navigate with keyboard, not mouse.

The ':focus-visible' pseudo-class applies styles only when the element receives focus via keyboard or other non-mouse input, improving accessibility without distracting mouse users.

📝 Syntax

expert

What error does this CSS snippet cause?

Examine the CSS code below. What kind of error or issue will it cause in the browser?

CSS

div > .item { color: green; }
div > .item { color: blue !important }
div > .item { color: red; }

A Syntax error due to missing semicolon in second rule

B The first rule overrides the others

C All rules apply and colors blend

D The last rule is ignored because of !important in the second rule

💡 Hint

Check punctuation carefully in CSS declarations.

There is no syntax error (trailing semicolon optional). All rules target the same elements with same specificity. The !important in the second rule gives it highest priority, ignoring the normal declarations before and after.

Practice

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