|4.88Mins Read
CSS :first-child Best Practices with Tailwind CSS Examples
- Authors
- Name
- Geeks Kai
- @KaiGeeks
Loading share buttons...
Loading content...
:first-child Best PracticesQuick Answer: Use
:first-childwhen 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 thefirst: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.
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.
div:first-child {
color: red;
}
:first-child when structural position is the real ruleIf 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.
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.
:first-of-type is the better selectorOne 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;
}
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:
:first-child with DOM firstChildThis 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:
firstChild in the DOM API:first-child matches elementsThat distinction matters if you are comparing CSS behavior with DOM inspection in JavaScript.
:first-child and :nth-child(1) are equivalentThese 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.
:first-childTailwind 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.
first: with hover or other modifiersTailwind 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.
first: with responsive utilities carefullyTailwind 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.
first: where repetition is the real problemTailwind 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.
:first-child when you really need :first-of-type:first-childfirst: in Tailwind applies to the element when it is the first childThe 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.