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.