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.

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 specificity

   ID selectors have the highest specificity, followed by class selectors, then element selectors.

2. Step 2: Compare given selectors

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

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 classes and elements [OK]

Common Mistakes:

• Thinking class selectors have higher specificity than IDs
• Confusing element selectors with class selectors
• Ignoring the universal selector has lowest specificity

2. Which of the following CSS selectors is written with correct syntax?

easy

A. .container > #main .item

B. #main .container > .item#

C. .container #main .item#

D. #main > .container .item#

Solution

1. Step 1: Check each selector for valid CSS syntax

   Valid selectors use IDs with # before the name, classes with ., and combinators like > properly placed.

2. Step 2: Identify invalid parts

   Options A, B, and D end with # which is invalid syntax. .container > #main .item is correctly formed.

3. Final Answer:

   .container > #main .item -> Option A

4. Quick Check:

   Valid CSS selector syntax = .container > #main .item [OK]

Hint: IDs start with # and never end with # [OK]

Common Mistakes:

• Placing # at the end of selectors
• Misusing combinators like >
• Mixing class and ID syntax incorrectly

3. Given the CSS rules below, which color will the <p> element inside <div id="content"> have?

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

medium

A. Blue

B. Red

C. Black (default)

D. Green

Solution

1. Step 1: Calculate specificity of each rule

   p is element selector (lowest), .content p has a class and element, and #content p has an ID and element. ID selector has highest specificity.

2. Step 2: Determine which rule applies

   The #content p rule overrides others because ID selectors beat class and element selectors.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   ID selector rule wins = Red color [OK]

Hint: ID selectors override class and element selectors [OK]

Common Mistakes:

• Choosing class selector color over ID selector
• Ignoring specificity order
• Assuming last rule always wins regardless of specificity

4. Why does the following CSS not apply the red color to the <h1> element?

h1 { color: blue; }
#title { color: red; }
.title { color: green; }

HTML:

<h1 class="title" id="header">Hello</h1>

medium

A. Because element selectors have higher specificity than ID selectors

B. Because class selectors always override ID selectors

C. Because the ID selector #title does not match the element's ID

D. Because the CSS syntax is incorrect

Solution

1. Step 1: Match selectors to HTML element

   The element has id="header" and class="title". The selector #title targets an element with ID "title", which does not match.

2. Step 2: Understand why red color is not applied

   Since #title does not match, its rule is ignored. The class selector .title applies green, which overrides the element selector blue.

3. Final Answer:

   Because the ID selector #title does not match the element's ID -> Option C

4. Quick Check:

   ID selector must match element's ID exactly [OK]

Hint: ID selectors must match element's actual ID attribute [OK]

Common Mistakes:

• Assuming class overrides ID selectors
• Confusing ID and class selectors
• Ignoring selector matching rules

5. You have these CSS rules:

.btn { color: black; }
button { color: blue; }
#submit.btn { color: green; }

And this HTML:

<button id="submit" class="btn">Send</button>

What color will the button text be and why?

hard

A. Black, because the first rule always wins

B. Blue, because element selectors override class selectors

C. Black, because class selectors override element selectors

D. Green, because the combined ID and class selector has highest specificity

Solution

1. Step 1: Calculate specificity of each rule

   .btn is class selector (specificity 0,1,0), button is element selector (0,0,1), and #submit.btn combines ID and class (1,1,0), highest specificity.

2. Step 2: Determine which rule applies

   The #submit.btn selector wins because it has the highest specificity, so the color is green.

3. Final Answer:

   Green, because the combined ID and class selector has highest specificity -> Option D

4. Quick Check:

   ID + class selector beats class or element alone [OK]

Hint: Combine ID and class selectors for highest specificity [OK]

Common Mistakes:

• Ignoring combined selector specificity
• Thinking element selector beats class selector
• Assuming first rule always applies