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.

Practice

1. What does the Tailwind class first:bg-blue-500 do in a list of items?

easy

A. It changes the background color of the first item to blue.

B. It changes the background color of all items to blue.

C. It changes the background color of the last item to blue.

D. It removes the background color from the first item.

Solution

1. Step 1: Understand the first: prefix

   The first: prefix in Tailwind targets only the first child element in a group.

2. Step 2: Apply the background color

   The class bg-blue-500 sets the background color to blue. Combined with first:, only the first item gets this color.

3. Final Answer:

   It changes the background color of the first item to blue. -> Option A

4. Quick Check:

   first:bg-blue-500 targets first child [OK]

Hint: Remember: first: styles only the first child [OK]

Common Mistakes:

• Thinking it styles all items
• Confusing first-child with last-child
• Assuming it removes styles instead of adding

2. Which of these is the correct Tailwind syntax to style only the last child element with red text?

easy

A. last-child:text-red-500

B. lastchild:text-red-500

C. lastChild:text-red-500

D. last:text-red-500

Solution

1. Step 1: Recall Tailwind pseudo-class syntax

   Tailwind uses first: and last: prefixes without hyphens or camel case.

2. Step 2: Identify the correct prefix for last child

   The correct prefix is last:, so last:text-red-500 applies red text to the last child.

3. Final Answer:

   last:text-red-500 -> Option D

4. Quick Check:

   Use last: prefix for last child [OK]

Hint: Tailwind uses simple last:, no hyphens or camelCase [OK]

Common Mistakes:

• Using CSS syntax like last-child:
• Writing camelCase or lowercase without colon
• Adding extra hyphens or misspelling

3. Given this HTML and Tailwind classes:

<ul>
  <li class="first:text-green-600 last:text-red-600">Apple</li>
  <li class="first:text-green-600 last:text-red-600">Banana</li>
  <li class="first:text-green-600 last:text-red-600">Cherry</li>
</ul>

What color will the text of each list item be?

medium

A. Apple is red, Banana is green, Cherry is default

B. Apple is green, Banana is default, Cherry is red

C. All items are green

D. Apple and Cherry are red, Banana is default

Solution

1. Step 1: Understand the classes on each <li>

   Each <li> has first:text-green-600 and last:text-red-600. These apply green text to the first child and red text to the last child only.

2. Step 2: Apply styles to list items

   Apple is the first <li>, so it gets green text. Cherry is the last <li>, so it gets red text. Banana is in the middle, so it keeps default text color.

3. Final Answer:

   Apple is green, Banana is default, Cherry is red -> Option B

4. Quick Check:

   first: green, last: red, others default [OK]

Hint: Only first and last children get styled, others stay default [OK]

Common Mistakes:

• Assuming all items get styled
• Mixing up first and last child colors
• Thinking middle items get styles too

4. You want to style the first and last paragraphs inside a <section> differently using Tailwind. You wrote:

<section>
  <p class="first:text-blue-700 last:text-red-700">Intro</p>
  <p class="first:text-blue-700 last:text-red-700">Content</p>
  <p class="first:text-blue-700 last:text-red-700">Summary</p>
</section>

In practice, the first paragraph gets blue text, the last gets red text, and the middle stays default. What best explains this behavior?

medium

A. The first: and last: classes must be on the same element but only one applies per element.

B. Tailwind's first: and last: only work if all siblings share the same class.

C. The first: and last: classes must be on the parent, not children.

D. The first: and last: classes must be on each paragraph without repeating.

Solution

1. Step 1: Understand how first: and last: work on the same element

   When both first: and last: are on the same element, only one can apply because an element cannot be both first and last child simultaneously.

2. Step 2: Analyze the HTML structure

   Each paragraph has both classes. Intro is first child, so first:text-blue-700 applies but last:text-red-700 does not. Summary is last child, so last:text-red-700 applies but first: does not. Content matches neither.

3. Final Answer:

   The first: and last: classes are on the same element but only one applies per element. -> Option A

4. Quick Check:

   One element can't be both first and last child [OK]

Hint: One element can only be first or last child, not both [OK]

Common Mistakes:

• Thinking classes must be on parent
• Believing all siblings must share classes
• Expecting both styles on same element

5. You have a navigation bar with 5 links inside a <nav>. You want the first link to have a green border, the last link to have a red border, and all others to have a gray border. Which Tailwind classes and structure will achieve this best?

hard

A. <nav>
<a class="first:border-green-500 last:border-red-500 border-gray-300">Home</a>
<a class="border-gray-300">About</a>
<a class="border-gray-300">Services</a>
<a class="border-gray-300">Blog</a>
<a class="border-gray-300">Contact</a>
</nav>

B. <nav>
<a class="border-gray-300">Home</a>
<a class="border-gray-300">About</a>
<a class="border-gray-300">Services</a>
<a class="border-gray-300">Blog</a>
<a class="first:border-green-500 last:border-red-500 border-gray-300">Contact</a>
</nav>

C. <nav>
<a class="first:border-green-500 last:border-red-500 border-gray-300">Home</a>
<a class="first:border-green-500 last:border-red-500 border-gray-300">About</a>
<a class="first:border-green-500 last:border-red-500 border-gray-300">Services</a>
<a class="first:border-green-500 last:border-red-500 border-gray-300">Blog</a>
<a class="first:border-green-500 last:border-red-500 border-gray-300">Contact</a>
</nav>

D. <nav>
<a class="border-gray-300 first:border-green-500 last:border-red-500">Home</a>
<a class="border-gray-300">About</a>
<a class="border-gray-300">Services</a>
<a class="border-gray-300">Blog</a>
<a class="border-gray-300">Contact</a>
</nav>

Solution

1. Step 1: Understand how to apply default and conditional styles

   All links should have a gray border by default. The first and last links get additional border colors using first: and last: prefixes.

2. Step 2: Check class placement and repetition

   Apply border-gray-300 to all links. Add first:border-green-500 last:border-red-500 to all links too. First link matches first: (green override), last matches last: (red override), others match neither (gray).<br><pre><nav> <a class="first:border-green-500 last:border-red-500 border-gray-300">Home</a> <a class="first:border-green-500 last:border-red-500 border-gray-300">About</a> <a class="first:border-green-500 last:border-red-500 border-gray-300">Services</a> <a class="first:border-green-500 last:border-red-500 border-gray-300">Blog</a> <a class="first:border-green-500 last:border-red-500 border-gray-300">Contact</a> </nav>

3. Final Answer:

   Option C correctly applies default and conditional borders. -> Option C

4. Quick Check:

   Default border on all, first and last get overrides [OK]

Hint: Put default styles on all, first/last overrides on all elements [OK]

Common Mistakes:

• Adding first/last classes to all links
• Putting first/last classes on wrong elements
• Not applying default styles to all links