Nth-child selector in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What elements are selected by li:nth-child(3n)?

Given a list of <li> items, which items will be styled by the CSS selector li:nth-child(3n)?

CSS

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

A Items 2, 4, and 6

B Items 1, 3, and 5

C Items 3 and 6 only

D All items

💡 Hint

Remember that 3n means every 3rd element starting from 3.

The selector li:nth-child(3n) matches every 3rd <li> element: 3, 6, 9, and so on. In the example, only items 3 and 6 match.

🧠 Conceptual

intermediate

What does :nth-child(odd) select?

Which elements are targeted by the CSS selector :nth-child(odd)?

CSS

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</div>

A Only the last paragraph

B All paragraphs with even positions: 2, 4, 6, ...

C Only the first paragraph

D All paragraphs with odd positions: 1, 3, 5, ...

💡 Hint

Odd means 1, 3, 5, and so on.

The :nth-child(odd) selector matches elements in odd positions: 1st, 3rd, 5th, etc.

📝 Syntax

advanced

What error occurs with li:nth-child(2n+)?

Consider the CSS selector li:nth-child(2n+). What happens when you use this selector in your CSS?

CSS

li:nth-child(2n+) { color: red; }

A Syntax error: incomplete expression after '+'

B Selects every 2nd element starting from 1

C Selects no elements

D Selects every element

💡 Hint

Check if the expression after '+' is complete.

The expression 2n+ is incomplete because it lacks a number after the plus sign. This causes a syntax error and the selector is invalid.

❓ rendering

advanced

Which CSS rule colors only the 4th item in a list?

You want to color only the 4th <li> item red. Which CSS selector and rule achieves this?

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

A li:nth-child(4n) { color: red; }

B li:nth-child(4) { color: red; }

C li:nth-child(odd) { color: red; }

D li:nth-child(3n) { color: red; }

💡 Hint

Use a selector that targets exactly the 4th child.

li:nth-child(4) selects only the 4th <li> element, coloring it red.

❓ accessibility

expert

How does :nth-child affect keyboard navigation and accessibility?

If you use :nth-child selectors to hide or style elements, what should you consider to keep your page accessible?

A Ensure hidden elements are removed from keyboard focus and screen readers

B No special consideration is needed; styling does not affect accessibility

C Use <code>:nth-child</code> only on non-interactive elements

D Avoid using <code>:nth-child</code> selectors altogether

💡 Hint

Think about how hidden or styled elements affect users who navigate with keyboard or screen readers.

When using :nth-child to hide or style elements, ensure that hidden elements are also removed from keyboard focus and screen readers (e.g., using display:none or aria-hidden="true") to maintain accessibility.