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.