Element selectors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which CSS rule selects all

elements inside a

?

You want to style all

elements that are inside any

element. Which CSS selector will do this?

A section > p { color: blue; }

B p > section { color: blue; }

C p section { color: blue; }

D section p { color: blue; }

💡 Hint

Think about the order of elements in the selector and the difference between descendant and child selectors.

The selector section p selects all

elements inside any

, no matter how deep. Option D selects only direct children, which is more restrictive. Options B and D have the order reversed, so they select

inside

, which is not what we want.

❓ selector

intermediate

What does the selector 'ul > li' select?

Given the CSS selector ul > li, what elements will it select?

A All <li> elements that are direct children of a <ul> element.

B All <li> elements anywhere inside a <ul> element.

C All <ul> elements that are children of <li> elements.

D All <li> elements that are siblings of a <ul> element.

💡 Hint

The '>' symbol means direct child, not any descendant.

The selector ul > li selects only

elements that are immediate children of a

. It does not select nested
• elements deeper inside other elements. Option A would be ul li without the '>'. Options A and C misunderstand the order and relationship.

❓ rendering

advanced

What color will the

Given this HTML and CSS, what color will the

text show in the browser?

<h1>Hello</h1>

h1 { color: red; }
h1 { color: blue !important; }
h1 { color: green; }

CSS

h1 { color: red; }
h1 { color: blue !important; }
h1 { color: green; }

A Red

B Blue

C Green

D Black (default)

💡 Hint

Remember that !important overrides normal declarations.

The !important rule makes the blue color override the other color declarations, even though green is last. So the

text will be blue.

❓ accessibility

advanced

Which element selector best improves accessibility for screen readers?

You want to style all

A button { font-size: 1.5rem; }

B .btn { font-size: 1.5rem; }

C #button { font-size: 1.5rem; }

D * { font-size: 1.5rem; }

💡 Hint

Think about selecting elements by their tag name versus classes or IDs.

Using the element selector button targets all button elements directly, ensuring consistent styling for accessibility. Class or ID selectors depend on markup and may miss some buttons. The universal selector * affects all elements, which is not specific and can cause layout issues.

🧠 Conceptual

expert

How many

elements are selected by 'nav ul li' in this HTML?

Given this HTML:

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
  </ul>
</nav>
<ul>
  <li>Outside</li>
</ul>

How many <li> elements will the selector nav ul li select?

A 0

B 4

C 3

D 1

💡 Hint

Count only

elements inside

inside
.

The selector nav ul li selects all

elements inside any

that is inside a
. The first

with 3
• items is inside
  , so all 3 are selected. The second

  is outside
  , so its

  is not selected.

Practice

1. What does an element selector in CSS do?
p { color: red; }

easy

A. Styles all <p> elements on the page

B. Styles only the first <p> element

C. Styles elements with class 'p'

D. Styles elements with id 'p'

Solution

1. Step 1: Understand element selector syntax

   The selector p targets all <p> tags in the HTML.

2. Step 2: Apply style to all matching elements

   All <p> elements will have their text color changed to red.

3. Final Answer:

   Styles all <p> elements on the page -> Option A

4. Quick Check:

   Element selector targets all tags named in selector [OK]

Hint: Element selectors target all tags by name, no class or id needed [OK]

Common Mistakes:

• Confusing element selector with class or id selectors
• Thinking it styles only one element
• Assuming it targets elements with a class or id

2. Which of the following is the correct syntax to select all <h1> elements in CSS?

easy

A. #h1 { font-size: 2rem; }

B. .h1 { font-size: 2rem; }

C. h1 { font-size: 2rem; }

D. *h1 { font-size: 2rem; }

Solution

1. Step 1: Identify element selector syntax

   Element selectors use the tag name directly, like h1.

2. Step 2: Check other options

   .h1 { font-size: 2rem; } uses a class selector, #h1 { font-size: 2rem; } uses an id selector, *h1 { font-size: 2rem; } is invalid syntax.

3. Final Answer:

   h1 { font-size: 2rem; } -> Option C

4. Quick Check:

   Element selector = tag name only [OK]

Hint: Element selectors are just tag names without dots or hashes [OK]

Common Mistakes:

• Using dot (.) or hash (#) before tag name
• Adding invalid characters before tag name
• Confusing element selector with universal selector

3. Given this HTML:

<div>
  <p>Hello</p>
  <p>World</p>
  <span>!</span>
</div>

And this CSS:

p { color: blue; }

What color will the text inside the <span> be?

medium

A. Blue

B. Default (usually black)

C. Red

D. Green

Solution

1. Step 1: Identify which elements the selector targets

   The CSS selector p styles only <p> elements, not <span>.

2. Step 2: Determine the <span> text color

   Since <span> is not targeted, it keeps the default color (usually black).

3. Final Answer:

   Default (usually black) -> Option B

4. Quick Check:

   Element selector affects only matching tags [OK]

Hint: Element selectors style only their tag, others stay default [OK]

Common Mistakes:

• Assuming all text changes color
• Confusing element selector with universal selector
• Thinking styles cascade to all child elements automatically

4. What is wrong with this CSS code if the goal is to style all <li> elements?

.li { color: green; }

medium

A. It selects elements with class 'li', not <li> tags

B. It will style all <li> elements correctly

C. It selects elements with id 'li', not <li> tags

D. It is missing a semicolon

Solution

1. Step 1: Analyze the selector syntax

   The selector .li targets elements with class 'li', not the <li> tag.

2. Step 2: Identify correct selector for <li>

   To select all <li> elements, use li without a dot.

3. Final Answer:

   It selects elements with class 'li', not <li> tags -> Option A

4. Quick Check:

   Dot means class selector, not element selector [OK]

Hint: Dot means class, no dot means element tag [OK]

Common Mistakes:

• Using dot before tag name
• Confusing class and element selectors
• Ignoring selector syntax rules

5. You want to make all <button> elements have a blue background and white text. Which CSS code correctly uses an element selector and ensures accessibility with good contrast?

hard

A. button { background-color: lightblue; color: lightgray; }

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

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

D. button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; }

Solution

1. Step 1: Confirm element selector usage

   button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } uses button without dot or hash, correctly selecting all <button> elements.

2. Step 2: Check color contrast and styling

   button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } uses a dark blue background (#0055cc) and white text (#ffffff), ensuring good contrast and accessibility. It also adds padding and border-radius for better usability.

3. Final Answer:

   button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } -> Option D

4. Quick Check:

   Element selector + accessible colors = button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } [OK]

Hint: Use tag name only and pick colors with strong contrast [OK]

Common Mistakes:

• Using id or class selectors instead of element selector
• Choosing low contrast colors hurting accessibility
• Forgetting padding or border-radius for better button look