First-child and last-child targeting in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class targets only the first child element?

You want to apply a red text color only to the first child of a list. Which Tailwind CSS class should you use?

Tailwind

<ul>
  <li class="???">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

A first-child:text-red-500

B child:first:text-red-500

C text-red-500:first

D first:text-red-500

💡 Hint

Tailwind uses the prefix 'first:' to apply styles to the first child element.

In Tailwind CSS, the 'first:' prefix applies styles to the first child element. So 'first:text-red-500' colors only the first child red.

❓ selector

intermediate

How to style only the last child with Tailwind?

You want to add a bottom border only to the last item in a navigation menu. Which Tailwind class applies this style correctly?

Tailwind

<nav>
  <a href="#" class="???">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

A border-b-2:last

B last-child:border-b-2

C last:border-b-2

D child:last:border-b-2

💡 Hint

Tailwind uses 'last:' prefix to target the last child element.

The 'last:' prefix in Tailwind applies styles to the last child element. So 'last:border-b-2' adds a bottom border only to the last child.

❓ rendering

advanced

What is the visual result of this Tailwind code?

Given this HTML and Tailwind classes, which items have a green background?

Tailwind

<ul class="list-disc">
  <li class="first:bg-green-300 last:bg-green-300">Apple</li>
  <li class="first:bg-green-300 last:bg-green-300">Banana</li>
  <li class="first:bg-green-300 last:bg-green-300">Cherry</li>
</ul>

A Only 'Apple' and 'Cherry' have green backgrounds.

B All items have green backgrounds.

C Only 'Apple' has a green background.

D Only 'Cherry' has a green background.

💡 Hint

The 'first:' and 'last:' prefixes apply styles only to the first and last child respectively.

The 'first:bg-green-300' applies green background to the first

only, and 'last:bg-green-300' applies it to the last

only. So 'Apple' and 'Cherry' get green backgrounds, 'Banana' does not.

❓ accessibility

advanced

How to ensure keyboard focus styles only on the first child using Tailwind?

You want to add a visible focus ring only on the first button inside a toolbar when it receives keyboard focus. Which Tailwind class combination achieves this?

Tailwind

<div role="toolbar">
  <button class="???">Save</button>
  <button>Cancel</button>
  <button>Delete</button>
</div>

A first:focus:outline-none first:focus:ring-2 first:focus:ring-blue-500

B focus:first:outline-none focus:first:ring-2 focus:first:ring-blue-500

C focus:first-child:outline-none focus:first-child:ring-2 focus:first-child:ring-blue-500

D first-child:focus:outline-none first-child:focus:ring-2 first-child:focus:ring-blue-500

💡 Hint

Tailwind uses 'first:' and 'focus:' prefixes combined to target first child on focus.

The correct syntax is 'first:focus:' to apply focus styles only on the first child element when focused. Other options use invalid or unsupported prefixes.

❓ layout

expert

Which Tailwind class combination correctly adds margin only between siblings except before the first child?

You want to add a left margin of 1rem only to all list items except the first one, using Tailwind. Which option achieves this spacing correctly?

Tailwind

<ul class="flex">
  <li class="???">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

A first:ml-0 ml-4

B ml-4 first:ml-0

C ml-4 last:ml-0

D ml-0 first:ml-4

💡 Hint

Apply a default margin and override it on the first child with zero margin.

Applying 'ml-4' adds margin-left to all items. Then 'first:ml-0' removes margin-left from the first child only. The order matters: base class first, then first: override.

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