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.