ID selectors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What color will the text be?

Given the following HTML and CSS, what color will the text inside the <h1> tag appear as in the browser?

CSS

/* CSS */
#title {
  color: blue;
}

h1 {
  color: red;
}

/* HTML */
<h1 id="title">Hello World</h1>

A Red

B Black (default)

C Blue

D Green

💡 Hint

Remember that ID selectors have higher specificity than element selectors.

The ID selector (#title) has higher specificity than the element selector (h1), so the color blue from #title applies.

📝 Syntax

intermediate

Which CSS rule correctly selects the element with id 'main'?

Choose the correct CSS selector to style the element with id="main".

A #main { background: yellow; }

B .main { background: yellow; }

C main { background: yellow; }

D *main { background: yellow; }

💡 Hint

ID selectors start with a special symbol.

The # symbol is used to select elements by their id attribute in CSS.

❓ rendering

advanced

What is the background color of the div?

Given this HTML and CSS, what background color will the <div> have when rendered?

CSS

/* CSS */
#box {
  background-color: lightgray;
}

.container #box {
  background-color: orange;
}

/* HTML */
<div class="container">
  <div id="box">Content</div>
</div>

A Orange

B Lightgray

C Transparent

D White

💡 Hint

Look at the specificity and the selector that matches the element.

The selector '.container #box' is more specific than just '#box', so the background color orange applies.

❓ accessibility

advanced

Why should IDs be unique in HTML?

Select the best reason why each ID attribute value should be unique on a webpage.

A To make the page look better visually

B To ensure CSS styles apply only once per page

C To reduce page load time

D To allow JavaScript and assistive technologies to identify elements uniquely

💡 Hint

Think about how scripts and screen readers find elements.

Unique IDs let JavaScript and assistive tools find and interact with the exact element reliably.

🧠 Conceptual

expert

What happens if multiple elements share the same ID?

If two or more elements have the same id attribute value, what is the most likely effect in CSS and JavaScript?

A CSS styles apply only to the first element, and JavaScript throws an error

B CSS styles apply to all elements with that ID, and JavaScript selects only the first element with that ID

C CSS styles apply to none, and JavaScript selects all elements with that ID

D CSS styles apply to all, and JavaScript selects all elements with that ID

💡 Hint

Consider how browsers handle duplicate IDs in styling and scripting.

CSS applies styles to all elements matching the selector, even if IDs are duplicated (though invalid). JavaScript's getElementById returns only the first matching element.

Practice

1. What does an ID selector in CSS target?
#header { color: blue; }

easy

A. All elements of a specific type

B. A single unique element with the specified ID

C. All elements with the specified class

D. All elements inside a container

Solution

1. Step 1: Understand the meaning of # in CSS

   The # symbol in CSS is used to select an element by its unique ID attribute.

2. Step 2: Identify what an ID selector targets

   An ID selector targets exactly one element that has the matching ID value.

3. Final Answer:

   A single unique element with the specified ID -> Option B

4. Quick Check:

   ID selector = unique element [OK]

Hint: ID selectors start with # and target one unique element [OK]

Common Mistakes:

• Confusing ID selector with class selector (which uses .)
• Thinking ID selects multiple elements
• Using ID selector without # symbol

2. Which of the following is the correct syntax to select an element with ID main-content in CSS?

easy

A. #main-content { }

B. .main-content { }

C. main-content { }

D. *main-content { }

Solution

1. Step 1: Recall the syntax for ID selectors

   ID selectors use the # symbol followed by the ID name without spaces.

2. Step 2: Match the correct syntax

   The correct syntax is #main-content { } to select the element with ID "main-content".

3. Final Answer:

   #main-content { } -> Option A

4. Quick Check:

   ID selector syntax = #idname [OK]

Hint: Use # before ID name, no spaces [OK]

Common Mistakes:

• Using . instead of # for ID
• Omitting # symbol
• Adding extra characters like * before ID

3. Given the HTML:

<div id="box">Hello</div>

And CSS:

#box { color: red; } .box { color: blue; }

What color will the text inside the div appear?

medium

A. Blue

B. Black (default)

C. Red

D. Both red and blue

Solution

1. Step 1: Identify the selectors applied

   The div has an ID "box" but no class "box". The CSS has an ID selector #box and a class selector .box.

2. Step 2: Determine which selector applies

   Since the div has ID "box", the #box selector applies, setting color to red. The class selector does not apply.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   ID selector overrides class selector = red [OK]

Hint: ID selectors override class selectors in CSS [OK]

Common Mistakes:

• Confusing class and ID selectors
• Assuming both styles apply simultaneously
• Ignoring CSS specificity rules

4. What is wrong with this CSS code if the element with ID nav is not styled?

#nav { background-color: yellow color: white }

medium

A. CSS property name is incorrect

B. ID selector should use a dot (.) instead of #

C. ID selector must be written as nav#

D. Missing semicolon after property value

Solution

1. Step 1: Check CSS syntax for property declarations

   Each CSS property declaration must end with a semicolon ;. Omitting semicolons between properties causes errors.

2. Step 2: Identify the missing semicolon

   The code #nav { background-color: yellow color: white } is missing a semicolon after yellow. This can cause some browsers to ignore the rule.

3. Final Answer:

   Missing semicolon after property value -> Option D

4. Quick Check:

   CSS properties end with ; [OK]

Hint: Always end CSS declarations with a semicolon [OK]

Common Mistakes:

• Using . instead of # for ID selectors
• Writing selector as nav# instead of #nav
• Misspelling CSS property names

5. You want to style only the element with ID footer to have a green background and white text. Which CSS code correctly does this and ensures no other elements are affected?

hard

A. #footer { background-color: green; color: white; }

B. .footer { background-color: green; color: white; }

C. footer { background-color: green; color: white; }

D. *#footer { background-color: green; color: white; }

Solution

1. Step 1: Identify the correct selector for an ID

   To select an element by ID, use #idname. Here, #footer targets the element with ID "footer".

2. Step 2: Confirm the CSS properties and uniqueness

   The properties background-color: green; and color: white; style the background and text color. Using #footer ensures only that element is styled.

3. Final Answer:

   #footer { background-color: green; color: white; } -> Option A

4. Quick Check:

   ID selector with # targets one element [OK]

Hint: Use #footer to style only the footer element [OK]

Common Mistakes:

• Using .footer which targets class, not ID
• Using element selector footer which targets all footer tags
• Adding unnecessary * before #footer