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.