Specificity rules in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS rule applies to the paragraph?

Given the following CSS and HTML, which rule will color the paragraph text green?

CSS

p { color: blue; }
#main p { color: green; }
.content p { color: red; }

<div id="main" class="content">
  <p>Hello world!</p>
</div>

A p { color: blue; }

B #main p { color: green; }

C .content p { color: red; }

D All rules apply equally, so the text is purple.

💡 Hint

Remember that IDs have higher specificity than classes or element selectors.

The #main p selector has higher specificity because it uses an ID selector, which beats class selectors like .content p and element selectors like p. So the paragraph text will be green, not red or blue.

🧠 Conceptual

intermediate

What is the specificity value of this selector?

Calculate the specificity of the selector ul#nav li.active a:hover.

A 0,1,1,3

B 0,0,3,3

C 0,1,2,3

D 0,1,2,2

💡 Hint

Count IDs, classes/pseudo-classes, and elements separately.

Specificity is counted as (inline, IDs, classes/pseudo-classes, elements). Here, there is 1 ID (#nav), 2 classes/pseudo-classes (.active and :hover), and 3 elements (ul, li, a), so the specificity is 0,1,2,3.

❓ rendering

advanced

Which color will the button have?

Consider this HTML and CSS. What color will the button text be when rendered?

CSS

<style>
button { color: black !important; }
.btn-primary { color: blue; }
#submit-btn { color: red; }
</style>
<button id="submit-btn" class="btn-primary">Submit</button>

A Black

B Default browser color

C Red

D Blue

💡 Hint

The !important rule overrides normal specificity.

The button { color: black !important; } rule overrides all other color rules, even those with higher specificity like #submit-btn. So the button text will be black.

❓ accessibility

advanced

How does specificity affect focus styles for accessibility?

You have these CSS rules for a link's focus style. Which rule will actually show a visible outline when the link is focused?

CSS

a:focus { outline: 2px solid blue; }
a.special:focus { outline: none; }
.special { outline: 3px solid red; }

A The link will have no outline on focus.

B The link will have a 3px red outline on focus.

C The link will have a 2px blue outline on focus.

D The link will have a default browser outline.

💡 Hint

Check which selector has higher specificity and applies on focus.

The selector a.special:focus has higher specificity than a:focus and sets outline: none;, so the link will have no visible outline when focused, which can harm accessibility.

📝 Syntax

expert

What error occurs with this CSS selector?

What happens if you write this CSS selector: div > > p?

CSS

div > > p { color: green; }

A The selector matches <code>p</code> elements that are grandchildren of <code>div</code>.

B The selector matches all <code>p</code> inside any <code>div</code>.

C The selector matches only direct child <code>p</code> of <code>div</code>.

D The CSS is invalid and will cause a syntax error; the rule is ignored.

💡 Hint

Check the syntax for combinators in CSS selectors.

The selector div > > p has two adjacent child combinators, which is invalid syntax. Browsers ignore this rule due to the syntax error.