Class selectors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What color will the text be?

Given the CSS and HTML below, what color will the text inside the

tag appear as in the browser?

CSS

HTML:
<p class="highlight">Hello World</p>

CSS:
.highlight { color: red; }
.highlight.special { color: blue; }

A Green

B Blue

C Black (default)

D Red

💡 Hint

Look at the class attribute in the HTML and which CSS selector matches it exactly.

The paragraph has only the class 'highlight'. The selector '.highlight' applies red color. The '.highlight.special' selector requires both classes, which the paragraph does not have, so blue does not apply.

❓ layout

intermediate

Which CSS rule centers the box horizontally?

You want to center a

with class 'box' horizontally inside its parent. Which CSS rule using class selectors will do this correctly?

CSS

HTML:
<div class="container">
  <div class="box">Content</div>
</div>

CSS:
.container { width: 300px; border: 1px solid black; }
.box { width: 100px; height: 100px; background: lightblue; }

A .box { display: inline-block; }

B .box { text-align: center; }

C .box { margin-left: auto; margin-right: auto; }

D .box { float: center; }

💡 Hint

Think about how margin auto works for block elements.

Setting left and right margins to auto on a block element centers it horizontally inside its parent container. 'text-align' affects inline content, 'float: center' is invalid, and 'display: inline-block' alone does not center the box.

🧠 Conceptual

advanced

What does this CSS selector target?

Consider the CSS selector '.menu > .item.active'. Which elements will this selector apply styles to?

A Elements with class 'item' and 'active' that are direct children of an element with class 'menu'.

B Any element with class 'active' inside an element with class 'item' inside '.menu'.

C All elements with class 'menu' that have a child with classes 'item' and 'active'.

D Elements with class 'menu' and 'item' and 'active' all at once.

💡 Hint

Look at the '>' symbol and the order of classes.

The '>' means direct child. So '.menu > .item.active' targets elements that have both 'item' and 'active' classes and are direct children of an element with class 'menu'.

❓ accessibility

advanced

How to improve accessibility with class selectors?

You have a button with class 'btn-primary'. Which practice improves accessibility when styling this button using class selectors?

A Use high contrast colors in '.btn-primary' styles to ensure text is readable.

B Use very light text color on light background in '.btn-primary'.

C Use only background colors without changing text color in '.btn-primary'.

D Use font size smaller than 10px in '.btn-primary' for compact design.

💡 Hint

Think about users with vision difficulties.

High contrast colors help users with low vision read text easily. Light text on light background or very small fonts reduce readability and accessibility.

📝 Syntax

expert

What error does this CSS code cause?

What error or problem will the following CSS code cause when used in a stylesheet? .box { color: blue background: yellow; }

CSS

.box { color: blue
  background: yellow; }

A No error; CSS will apply both color and background correctly.

B Syntax error due to missing semicolon after 'color: blue'.

C Runtime error in browser console.

D The background color will be ignored but text color applies.

💡 Hint

Check punctuation carefully in CSS declarations.

CSS requires each property declaration to end with a semicolon except the last one. Missing semicolon after 'color: blue' causes a syntax error and the whole rule may be ignored.