First-child and last-child in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the first child element of a list.

CSS

ul li:[1] { color: red; }

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

Afirst-child

Bonly-child

Cnth-child(2)

Dlast-child

Attempts:

3 left

💡 Hint

Common Mistakes

Using :last-child instead of :first-child

Using :nth-child(2) which selects the second child

Using :only-child which selects an element that is the only child

The :first-child selector targets the first child element inside its parent.

2fill in blank

medium

Complete the code to select the last paragraph inside a section.

CSS

section p:[1] { font-weight: bold; }

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

Alast-child

Bfirst-child

Cnth-last-child(2)

Donly-child

Attempts:

3 left

💡 Hint

Common Mistakes

Using :first-child instead of :last-child

Using :nth-last-child(2) which selects the second last child

Using :only-child which selects an element that is the only child

The :last-child selector targets the last child element inside its parent.

3fill in blank

hard

Fix the error in the code to select the first list item correctly.

CSS

ol li:[1] { background-color: yellow; }

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

Alast-child

Bnth-child(0)

Cfirst-child

Dnth-child(1)

Attempts:

3 left

💡 Hint

Common Mistakes

Using :last-child which selects the last item

Using :nth-child(0) which is invalid

Using :nth-child(1) which works but is less clear

The correct pseudo-class to select the first child is :first-child. :nth-child(1) also works but is less common for this purpose.

4fill in blank

hard

Fill both blanks to style the first and last list items with different colors.

CSS

ul li:[1] { color: green; }
ul li:[2] { color: blue; }

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

Afirst-child

Bnth-child(2)

Clast-child

Donly-child

Attempts:

3 left

💡 Hint

Common Mistakes

Using :nth-child(2) instead of :last-child for the last item

Using :only-child which only works if there is one item

Mixing up first-child and last-child

:first-child selects the first item, and :last-child selects the last item in the list.

5fill in blank

hard

Fill all three blanks to style the first list item italic, the last list item bold, and all list items except the second one gray.

CSS

li:[1] { font-style: italic; }
li:[2] { font-weight: bold; }
li:not(:[3]) { color: gray; }

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

Afirst-child

Blast-child

Conly-child

Dnth-child(2)

Attempts:

3 left

💡 Hint

Common Mistakes

Using :only-child incorrectly when there are multiple items

Confusing :nth-child(2) with :last-child

Not using :not() correctly in the third selector

:first-child styles the first list item italic, :last-child styles the last bold, and :not(:nth-child(2)) styles all except the second item gray.