CSS First Child best practices (with Tailwind)

The CSS :first-child pseudo-class is a versatile tool that lets you apply styles to the first element within a parent container. In this blog, we will explore how to use :first-child with plain CSS and Tailwind CSS, providing practical practices and examples.

What Is CSS first-child ?

The :first-child selector targets the first child of a parent, regardless of the type of element. It’s commonly used in lists, grids, or table structures to apply specific styles to the first child.

Plain CSS Syntax Example:

div:first-child {
  color: red;
}

Practice 1: Use :first-child with Specificity in Mind

The :first-child selector can be combined with other selectors to increase specificity. For instance, you can target the first <li> within a specific list:

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

This example makes only the first <li> inside .menu bold.

Practice 2: Combine with Other Pseudo-Classes

ou can combine :first-child with other pseudo-classes to create more complex styles. For example, you might want to style the first child only if it's a certain type of element:


div:first-child:nth-of-type(2) {
  color: red;
}

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

Here, the background color changes only when the first <li> is hovered.

Practice 3: Style Based on Structural Position

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.

Practice 4: Be Aware of Empty Space or Comments

When using :first-child, be cautious of whitespace and comments in the HTML structure. Browsers may treat these as part of the document structure, which can interfere with the expected behavior of :first-child.

<!-- This comment can affect :first-child selection -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Practice 5: Difference Between :first-child and :nth-child

Sometimes, you may confuse :first-child with :nth-child. The :first-child selector only targets the first child, whereas :nth-child(1) can target the first child based on its index, even if it's a specific element.

/* Targets the first list item only */
ul li:first-child {
  color: green;
}

/* Targets the first child, regardless of type */
ul:first-child {
  border-top: none;
}

Using Tailwind CSS with :first-child

Practice 1: Using :first-child with Tailwind CSS

In Tailwind CSS, you can use the first: variant to apply styles specifically to the first child of an element. Here’s an example of styling the first <li> in a list:

<ul class="list-none">
  <li class="first:font-bold">First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

In this case, Tailwind’s first:font-bold utility applies bold styling to the first <li>.

Practice 2: Apply Combined Selectors with Tailwind CSS

Tailwind allows you to combine :first-child with other pseudo-classes such as hover. For example, to change the background color of the first list item on hover:

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

Here, the background color of the first list item will change to blue-200 on hover.

Practice 3: Use :first-child with Responsive Design

Tailwind CSS makes it easy to apply responsive styles to the first child. For instance, you can change the font size of the first <li> on small screens:

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

In this example, the font size of the first <li> will be larger on medium screens and above.

Practice 4: Style Based on Structural Position

Tailwind CSS allows you to style the first child differently from the rest of the elements in a grid or flex layout. For example, you can remove the top border of the first grid item:


<div class="grid grid-cols-3 gap-4">
  <div class="first:border-t-0">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Here, the top border of the first grid item is removed, creating a cleaner layout.

Practice 5: Be Aware of Empty Space or Comments

When using :first-child, be cautious about how browsers handle whitespace and comments in HTML. Tailwind is unaffected by such issues, but in plain CSS, comments or space may disrupt the :first-child behavior.

<!-- This comment may interfere with :first-child -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Conclusion

The CSS :first-child pseudo-class is a powerful tool for styling the first element within a parent container. By combining :first-child with other selectors and pseudo-classes, you can create complex styles and responsive designs. When using Tailwind CSS, the first: variant simplifies applying styles to the first child. Remember to be mindful of whitespace and comments in your HTML structure to avoid unexpected behavior with :first-child.