CSS :first-child Best Practices with Tailwind CSS Examples

CSS `:first-child` Best Practices

Quick Answer: Use :first-child when you want to style an element only if it is the first sibling element inside its parent. If you want the first element of a specific type instead, use :first-of-type. In Tailwind CSS, the equivalent is usually the first: variant.
Best for: Lists, cards, rows, menus, and other repeated UI elements
Cost: Free, native CSS and Tailwind features
Key benefit: You can remove repetitive utility classes and target structural position directly

The CSS :first-child pseudo-class is a useful structural selector, but it is also one of the selectors people explain incorrectly. The most important rule is simple: :first-child targets the first element among siblings. It does not care about JavaScript node APIs like firstChild, and it is often confused with :first-of-type.

What Is CSS first-child ?

According to MDN, the :first-child pseudo-class represents the first element among a group of sibling elements. This makes it useful for lists, cards, tables, navigation menus, and repeated layout items where the first element needs slightly different styling.

Plain CSS Syntax Example:

div:first-child {
  color: red;
}

Best Practices

1. Use `:first-child` when structural position is the real rule

If your rule means "style the first item in this group," :first-child is usually the right selector.

For example, to style the first <li> in a menu:

ul.menu li:first-child {
  font-weight: bold;
}

This works well when the first item has a unique role, such as a lead item, a top border reset, or extra spacing.

2. Combine it with other selectors carefully

You can combine :first-child with other selectors and pseudo-classes:

ul li:first-child:hover {
  background-color: lightblue;
}

This changes the background only when the first list item is hovered.

You can also combine it with a parent selector:

.card > :first-child {
  margin-top: 0;
}

That is often a clean way to normalize spacing in reusable components.

3. Know when `:first-of-type` is the better selector

One of the most common mistakes is using :first-child when you actually mean "the first paragraph" or "the first li of its type".

Example:

<div>
  <h2>Title</h2>
  <p>Intro paragraph</p>
  <p>Another paragraph</p>
</div>

This selector will not match the paragraph:

p:first-child {
  color: red;
}

Why? Because the <p> is not the first child. The <h2> is.

This selector does what many people actually want:

p:first-of-type {
  color: red;
}

4. Use it for layout cleanup, not just color changes

If you want to style the first child differently from the rest of the elements in a grid, table, or card layout, :first-child works perfectly:

.grid-item:first-child {
  border-top: none;
}

This removes the top border of the first grid item, helping to create a cleaner look.

Good use cases include:

removing extra top padding
removing a border on the first row
adding a lead style to the first item
resetting spacing in card content

5. Do not confuse CSS `:first-child` with DOM `firstChild`

This is where a lot of confusion comes from.

In JavaScript, node.firstChild can return a text node or a comment node. In CSS, :first-child matches the first element among siblings.

So this older warning is misleading:

comments and whitespace can affect firstChild in the DOM API
comments and whitespace do not change how CSS :first-child matches elements

That distinction matters if you are comparing CSS behavior with DOM inspection in JavaScript.

6. Remember that `:first-child` and `:nth-child(1)` are equivalent

These are equivalent:

ul li:first-child {
  color: green;
}

ul li:nth-child(1) {
  color: green;
}

Use :nth-child() when you need more advanced index-based matching beyond the first element.

Using Tailwind CSS with `:first-child`

Tailwind CSS includes a first: variant that maps to the CSS :first-child pseudo-class.

Example:

<ul>
  <li class="py-4 first:pt-0">First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

This is a common Tailwind pattern for lists where all items have vertical padding except the first.

1. Combine `first:` with hover or other modifiers

Tailwind variants can be stacked:

<ul>
  <li class="first:hover:bg-blue-200">First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

That means: apply the hover background only if the item is the first child.

2. Combine `first:` with responsive utilities carefully

Tailwind also allows stacking with breakpoints:

<ul>
  <li class="first:text-lg md:first:text-xl">First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

This applies a larger font size to the first item, with a different size at the md breakpoint.

3. Use `first:` where repetition is the real problem

Tailwind first: is useful when you want to avoid adding one-off classes to the first element manually.

For example:

<div class="flex flex-col">
  <div class="first:border-t-0">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

This is cleaner than manually adding a special class to only the first item in repeated markup.

Common Mistakes to Avoid

Using :first-child when you really need :first-of-type
Assuming comments or whitespace break CSS :first-child
Targeting the wrong parent-child relationship
Overcomplicating simple first-item layout fixes with extra classes
Forgetting that first: in Tailwind applies to the element when it is the first child

Conclusion

The CSS :first-child pseudo-class is simple and useful when you apply it for the right reason: styling the first element among siblings. The biggest improvement most developers can make is knowing when to switch to :first-of-type and not mixing CSS selector rules with JavaScript DOM node behavior.

In Tailwind CSS, the first: variant gives you the same structural power without writing custom selectors. Use it when the first item in a repeated UI block needs a different padding, border, or emphasis.

CSS :first-child Best Practices with Tailwind CSS Examples