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.

Practice

1. What does a CSS class selector start with to select elements by their class?

easy

A. A dot (.) before the class name

B. A hash (#) before the class name

C. No symbol, just the class name

D. An asterisk (*) before the class name

Solution

1. Step 1: Understand CSS selector symbols

   Class selectors always start with a dot (.) to target elements with that class.

2. Step 2: Compare with other selectors

   ID selectors use #, element selectors use no symbol, and * selects all elements.

3. Final Answer:

   A dot (.) before the class name -> Option A

4. Quick Check:

   Class selector = dot (.) [OK]

Hint: Class selectors always begin with a dot (.) [OK]

Common Mistakes:

• Using # instead of . for class selectors
• Omitting the dot before the class name
• Confusing class selectors with element selectors

2. Which of the following is the correct CSS syntax to style all elements with class highlight?

easy

A. highlight { color: red; }

B. #highlight { color: red; }

C. .highlight { color: red; }

D. *highlight { color: red; }

Solution

1. Step 1: Identify correct class selector syntax

   The class selector uses a dot (.) followed by the class name, so .highlight is correct.

2. Step 2: Check other options

   #highlight targets an ID, highlight alone targets elements named 'highlight', and *highlight is invalid syntax.

3. Final Answer:

   .highlight { color: red; } -> Option C

4. Quick Check:

   Class selector syntax = dot + class name [OK]

Hint: Remember: dot + class name for class selectors [OK]

Common Mistakes:

• Using # instead of . for classes
• Leaving out the dot before class name
• Confusing class selectors with element selectors

3. Given this HTML and CSS, what color will the text inside the <p> tag be?

<p class="note">Hello!</p>
.note { color: blue; }
.alert { color: red; }

medium

A. Red

B. Blue

C. Black (default)

D. No color applied

Solution

1. Step 1: Match class in HTML with CSS selector

   The <p> tag has class "note", so the CSS rule .note { color: blue; } applies.

2. Step 2: Check other CSS rules

   The .alert class styles red but does not apply here because the element does not have that class.

3. Final Answer:

   Blue -> Option B

4. Quick Check:

   Class matches CSS selector = blue text [OK]

Hint: Match class attribute with dot selector name [OK]

Common Mistakes:

• Confusing class names and applying wrong styles
• Ignoring that only matching classes apply styles
• Assuming default color when class is present

4. What is wrong with this CSS if you want to style elements with class menu?

menu { font-size: 1.2rem; }

medium

A. Font size value is invalid

B. Missing curly braces

C. Class name should be uppercase

D. Missing dot before class name

Solution

1. Step 1: Check selector syntax

   The selector menu targets elements named <menu>, not class "menu". Class selectors need a dot before the name.

2. Step 2: Verify other parts

   Curly braces and font size are correct. Class names are case-sensitive but lowercase is valid.

3. Final Answer:

   Missing dot before class name -> Option D

4. Quick Check:

   Class selector needs dot (.) [OK]

Hint: Class selectors always start with a dot (.) [OK]

Common Mistakes:

• Forgetting the dot before class name
• Confusing element selectors with class selectors
• Assuming uppercase class names are required

5. You want to style all buttons with class primary to have a blue background and white text, but only when hovered. Which CSS code correctly uses class selectors and pseudo-classes?

hard

A. .primary:hover { background-color: blue; color: white; }

B. #primary:hover { background-color: blue; color: white; }

C. button.primary { background-color: blue; color: white; }

D. .primary { background-color: blue; color: white; }

Solution

1. Step 1: Identify correct class selector with hover

   To style elements with class "primary" on hover, use .primary:hover.

2. Step 2: Check other options

   #primary targets an ID, not class. button.primary styles all buttons with class but not on hover. .primary styles all with class but no hover effect.

3. Final Answer:

   .primary:hover { background-color: blue; color: white; } -> Option A

4. Quick Check:

   Class selector + :hover pseudo-class = .primary:hover { background-color: blue; color: white; } [OK]

Hint: Use .class:hover for hover styles on class elements [OK]

Common Mistakes:

• Using # instead of . for class selectors
• Forgetting :hover for hover effect
• Styling without hover when hover is needed