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.