First-child and last-child targeting in Tailwind - Browser Rendering Trace

Render Flow - First-child and last-child targeting

Read HTML list

↓

Create list item nodes

↓

Identify first-child and last-child

↓

Apply Tailwind first: and last: styles

↓

Render styles on matching elements

↓

Paint and Composite

The browser reads the HTML list, builds the list item elements, then applies Tailwind's first-child and last-child styles to the matching items before painting the final styled list.

Render Steps - 3 Steps

Code Added:<ul> with 4 <li> items

Before

→

After

[ul]
 ├─ [li] Apple
 ├─ [li] Banana
 ├─ [li] Cherry
 └─ [li] Date

The unordered list and its four list items appear as a vertical bullet list with default black text.

🔧 Browser Action:Creates DOM nodes for ul and li elements, applies default browser styles.

Code Sample

A bulleted list where the first item is red and the last item is green, showing how first-child and last-child selectors style specific list items.

Tailwind

<ul class="list-disc">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
</ul>

Tailwind

li:first-child { @apply first:text-red-600; }
li:last-child { @apply last:text-green-600; }

Render Quiz - 3 Questions

After applying step 2, which list item changes color?

A The first list item

B The last list item

C All list items

D No list items

Common Confusions - 2 Topics

Why doesn't first-child style apply if I add a wrapper inside the list item?

The first-child selector targets the first child of the parent. If you add a wrapper inside the li, the wrapper is the first child, not the li itself. So styling li:first-child won't affect inner wrappers.

💡 first-child targets direct children of the parent, not nested elements.

Why does last-child not style the second-to-last item?

last-child only matches the very last child element. The second-to-last is not last-child, so it won't get the style.

💡 Only the exact last child gets last-child styles.

Property Reference

Selector	What It Matches	Visual Effect	Common Use
first-child	The first child element of its parent	Styles only the first element	Highlight first item in lists or sections
last-child	The last child element of its parent	Styles only the last element	Highlight last item or special ending elements

Concept Snapshot

first-child and last-child select the first and last child elements of a parent. Use Tailwind's first: and last: prefixes to style these elements. They only match direct children, not nested elements. Commonly used to highlight first or last items in lists or sections. Remember: only one element can be first-child or last-child at a time.