First-child and last-child targeting in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red text color only to the first item in the list.

Tailwind

<ul>
  <li class="[1]">First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

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

Ahover:text-red-500

Btext-red-500

Clast:text-red-500

Dfirst:text-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-red-500 without the first: prefix colors all items.

Using last:text-red-500 colors the last item, not the first.

The first: prefix in Tailwind applies styles only to the first child element. Here, first:text-red-500 colors the first list item red.

2fill in blank

medium

Complete the code to add a blue background only to the last paragraph inside a section.

Tailwind

<section>
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p class="[1]">Paragraph three</p>
</section>

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

Alast:bg-blue-500

Bbg-blue-500

Cfirst:bg-blue-500

Dhover:bg-blue-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-blue-500 without the last: prefix colors all paragraphs.

Using first:bg-blue-500 colors the first paragraph, not the last.

The last: prefix applies styles only to the last child element. Here, last:bg-blue-500 adds a blue background to the last paragraph.

3fill in blank

hard

Fix the error in the code to apply a green border only to the first list item.

Tailwind

<ul>
  <li class="[1] border-green-500 border-2">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

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

Aborder-green-500 first:

Bborder-2 first:

Cfirst:border-green-500

Dlast:border-green-500

Attempts:

3 left

💡 Hint

Common Mistakes

Placing first: after the style class causes no effect.

Using last:border-green-500 targets the last item, not the first.

The correct Tailwind syntax to apply a border only to the first child is first:border-green-500. The prefix first: must come before the style.

4fill in blank

hard

Fill both blanks to add padding to the first child and margin to the last child in a div.

Tailwind

<div>
  <p class="[1]">First paragraph</p>
  <p class="[2]">Last paragraph</p>
</div>

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

Afirst:pt-4

Blast:mb-6

Cpt-4

Dmb-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding or margin classes without first: or last: prefixes affects all elements.

Mixing up first: and last: prefixes.

first:pt-4 adds top padding only to the first child, and last:mb-6 adds bottom margin only to the last child.

5fill in blank

hard

Fill all three blanks to style a list: first item with bold text, last item with italic text, and all items with gray text.

Tailwind

<ul class="text-gray-700">
  <li class="[1]">First</li>
  <li>Middle</li>
  <li class="[2]">Last</li>
</ul>

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

Afirst:font-bold

Blast:italic

Citalic

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Applying font-bold without first: prefix colors all items bold.

Using italic without last: prefix styles all items italic.

The list has gray text by default. first:font-bold makes the first item bold, last:italic makes the last item italic, and font-bold is used for the first item’s bold style.