Bird
Raised Fist0
CSSmarkup~30 mins

Specificity rules in CSS - Mini Project: Build & Apply

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
Understanding CSS Specificity Rules
📖 Scenario: You are creating a simple webpage with a heading and a paragraph. You want to learn how CSS specificity affects which styles are applied when multiple rules target the same element.
🎯 Goal: Build a small HTML page with a heading and paragraph, then write CSS rules with different selectors to see which style wins based on specificity.
📋 What You'll Learn
Create an HTML skeleton with a <h1> and a <p> element
Write CSS rules using element selectors, class selectors, and ID selectors
Apply conflicting color styles to the same elements using different selectors
Observe which CSS rule applies based on specificity
💡 Why This Matters
🌍 Real World
Web developers often need to control which CSS styles apply to elements, especially when multiple styles conflict. Understanding specificity helps them write CSS that works as intended.
💼 Career
Knowing CSS specificity is essential for front-end developers to maintain and debug styles in websites and web applications.
Progress0 / 4 steps
1
Create the HTML structure
Write the HTML code to create a <!DOCTYPE html> document with <html lang="en">, <head> including <meta charset="UTF-8"> and <title> 'Specificity Demo', and a <body> containing a <h1> with text 'Welcome' and a <p> with text 'This is a paragraph.'
CSS
Hint

Start by writing the basic HTML5 document structure with a heading and paragraph inside the body.

2
Add CSS with element selectors
Inside a <style> tag in the <head>, write CSS rules that set the color of h1 elements to blue and p elements to green using element selectors.
CSS
Hint

Use simple element selectors like h1 and p to set their text colors.

3
Add CSS with class selectors
Add a class called highlight to the <p> element in the HTML. Then, inside the <style> tag, add a CSS rule using the class selector .highlight that sets the color to red.
CSS
Hint

Add the class attribute to the paragraph and write a CSS rule for .highlight to change its color.

4
Add CSS with ID selector and observe specificity
Add an ID called main-title to the <h1> element in the HTML. Then, inside the <style> tag, add a CSS rule using the ID selector #main-title that sets the color to orange. This will override the previous h1 color because ID selectors have higher specificity.
CSS
Hint

Add the ID attribute to the heading and write a CSS rule for #main-title to change its color.

Notice how this color overrides the previous h1 color.

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 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