First-child and last-child targeting in Tailwind

Introduction

First-child and last-child targeting helps you style the first or last item in a group differently. This makes your design clearer and more organized.

You want the first item in a list to have a different background color.

You want the last button in a group to have rounded corners.

You want to add extra space only before the first paragraph.

You want to highlight the first or last menu item in navigation.

You want to remove the border from the last item in a list.

Syntax

Tailwind

first:<utility>
last:<utility>

Use first: before any Tailwind utility to style the first child element.

Use last: before any Tailwind utility to style the last child element.

Examples

The first list item text will be red.

Tailwind

<li class="first:text-red-500">Item 1</li>
<li>Item 2</li>

The last button will have rounded corners.

Tailwind

<button>Save</button>
<button class="last:rounded-lg">Cancel</button>

The first paragraph will have a top margin.

Tailwind

<p class="first:mt-4">Paragraph 1</p>
<p>Paragraph 2</p>

Sample Program

This example shows a list where the first item has a light blue background and the last item has a light green background. The middle item has no special background. Borders separate the items.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>First and Last Child Tailwind Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <ul class="border border-gray-300 max-w-sm mx-auto">
    <li class="first:bg-blue-100 last:bg-green-100 p-4 border-b border-gray-200">First item</li>
    <li class="p-4 border-b border-gray-200">Middle item</li>
    <li class="last:bg-green-100 p-4">Last item</li>
  </ul>
</body>
</html>

Important Notes

Make sure your HTML elements are siblings for first: and last: to work correctly.

You can combine these with other Tailwind utilities for more effects.

Use browser DevTools to inspect and test your styles live.

Summary

first: targets the first child element to style it differently.

last: targets the last child element to style it differently.

These help make lists and groups look neat and clear.

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