First-child and last-child targeting in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>:first-child</code> CSS pseudo-class select?

It selects the very first child element inside its parent container.

beginner

How do you target the last child element using Tailwind CSS?

Use the last: variant before a utility class, for example, last:bg-blue-500 changes the background of the last child.

beginner

Why is targeting first-child and last-child useful in web design?

It helps style only the first or last item differently, like adding extra space or a special color, making lists or menus look neat and clear.

intermediate

How would you add a top border only to the first item in a list using Tailwind?

Use first:border-t on the list items to add a top border only to the first child.

intermediate

What is the difference between :first-child and :first-of-type selectors?

:first-child selects the first child regardless of type, while :first-of-type selects the first child of a specific element type.

Which Tailwind prefix targets the last child element?

A last:

B first:

C child-last:

D end:

The last: prefix in Tailwind targets the last child element.

What does first:bg-red-500 do in Tailwind?

A Colors the last child background red

B Colors the first child background red

C Colors all children red

D Colors the parent background red

The first: prefix applies the style only to the first child.

Which CSS pseudo-class selects the last child element?

A :last-child

B :first-child

C :nth-child(1)

D :only-child

:last-child selects the last child element inside a parent.

If you want to add margin only to the first item in a list using Tailwind, which prefix do you use?

A only:

B last:

C first:

D child:

The first: prefix targets the first child element.

What happens if you use last:border-b-2 on list items?

A Adds a bottom border to all items

B Adds a top border to the last item

C Removes bottom border from last item

D Adds a bottom border only to the last item

The last: prefix applies the border only to the last child.

Explain how you would style the first and last items in a navigation menu differently using Tailwind CSS.

Think about how to add different colors or spacing to the first and last menu items.

Describe the difference between the CSS selectors :first-child and :last-child and how Tailwind helps you use them.

Focus on what each selector targets and how Tailwind makes it easy to apply styles.

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