Nth-child selector in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select every 3rd list item using the nth-child selector.

CSS

li[1] { color: blue; }

Drag options to blanks, or click blank then click option'

A:nth-child(odd)

B:nth-child(even)

C:nth-child(2n)

D:nth-child(3n)

Attempts:

3 left

💡 Hint

Common Mistakes

Using 2n selects every 2nd element, not every 3rd.

Using odd selects every odd element, not every 3rd.

The :nth-child(3n) selector matches every 3rd element (3rd, 6th, 9th, etc.).

2fill in blank

medium

Complete the code to select the 4th list item only.

CSS

li[1] { font-weight: bold; }

Drag options to blanks, or click blank then click option'

A:nth-child(3n)

B:nth-child(odd)

C:nth-child(4)

D:nth-child(even)

Attempts:

3 left

💡 Hint

Common Mistakes

Using odd or even selects multiple elements, not just one.

Using 3n selects every 3rd element, not the 4th.

The :nth-child(4) selector targets only the 4th element.

3fill in blank

hard

Fix the error in the selector to select every even list item.

CSS

li[1] { background-color: lightgray; }

Drag options to blanks, or click blank then click option'

A:nth-child(odd)

B:nth-child(even)

C:nth-child(2n+1)

D:nth-child(3n)

Attempts:

3 left

💡 Hint

Common Mistakes

Using odd selects odd elements, not even.

Using 2n+1 selects odd elements, not even.

The :nth-child(even) selector matches every even-numbered element (2nd, 4th, 6th, etc.).

4fill in blank

hard

Fill BLANK_1 to select every 3rd list item starting from the 2nd (2,5,8...) with red color. Fill BLANK_2 to select every 3rd list item starting from the 1st (1,4,7...) with italic style.

CSS

li[1] { color: red; }
li[2] { font-style: italic; }

Drag options to blanks, or click blank then click option'

A:nth-child(3n+2)

B:nth-child(3n)

C:nth-child(3n+1)

D:nth-child(2n)

Attempts:

3 left

💡 Hint

Common Mistakes

Using 3n selects every 3rd starting at 3 (3,6,9), not 2.

Confusing the offset number in the formula.

:nth-child(3n+2) selects every 3rd element starting at 2nd (2, 5, 8...).
:nth-child(3n+1) selects every 3rd element starting at 1st (1, 4, 7...).

5fill in blank

hard

Fill all three blanks to create a dictionary with CSS selectors as keys and colors as values: every 2nd item starting at 1st (odds: red) and every 2nd starting at 3rd (green).

CSS

const colors = {
  "[1]": "[2]",
  "[3]": "green"
};

Drag options to blanks, or click blank then click option'

Ali:nth-child(2n+1)

Bred

Cli:nth-child(2n+3)

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting that object keys must be strings (quotes are added in code).

Using color names without considering the string quotes in values.

This creates an object with keys as selectors and values as colors.
li:nth-child(2n+1) selects every 2nd item starting at 1 (1,3,5...).
li:nth-child(2n+3) selects every 2nd item starting at 3 (3,5,7...).
Colors are assigned as strings.