Mastering the CSS :first-child Pseudo-Class

Syntax and Basic Usage

The :first-child pseudo-class has a simple, intuitive syntax that fits seamlessly into your CSS rules. The selector is appended to any element selector to target only those elements that are the first child of their parent.

element:first-child {
 /* Styles applied only if element is the first child */
}

Targeting Specific Elements

/* Style the first list item in any list */
li:first-child {
 font-weight: bold;
 color: #2563eb;
}

/* Style the first paragraph within article elements */
article p:first-child {
 font-size: 1.25rem;
 line-height: 1.6;
}

/* Target the first heading in a section */
section h2:first-child {
 margin-top: 0;
}

Combining with Classes and IDs

You can combine :first-child with class selectors for more specific targeting:

/* First item within a specific navigation list */
.nav-list li:first-child {
 border-left: 3px solid #2563eb;
}

/* First card in a card grid */
.card-grid .card:first-child {
 grid-column: span 2;
}

The key principle is that the element before the :first-child pseudo-class must be the first child of its parent. In li:first-child, the li element must be the first child of its container.

For more advanced styling combinations, explore our guide on CSS pseudo-elements to learn how these powerful selectors work together.

:first-child vs :first-of-type

A common source of confusion is the distinction between :first-child and :first-of-type. While both pseudo-classes target elements, they do so based on different criteria that are essential to understand for effective CSS development.

Understanding the Difference

According to CSS-Tricks' comprehensive guide, the distinction becomes clear when you examine elements of different types within the same parent.

Example HTML Structure

<div class="container">
 <h2>Section Heading</h2>
 <p>First paragraph</p>
 <p>Second paragraph</p>
 <span>A span element</span>
</div>

Matching Results

• h2:first-child → Matches because the <h2> is literally the first child
• p:first-child → Does NOT match because the first child is <h2>, not <p>
• span:first-child → Does NOT match because the first child is <h2>
• p:first-of-type → Matches the first <p> element
• span:first-of-type → Matches the first <span> element

This distinction is crucial when selecting elements for styling. Use :first-child when you need to target the absolute first element, and :first-of-type when you want the first of a specific element type regardless of what comes before it.

When to Use Each

Use :first-child for removing top borders or margins on the first item in a series, styling the lead paragraph in articles, or applying special formatting to the initial navigation item. Use :first-of-type when you need the first paragraph regardless of preceding headings, or the first image in a mixed content area.

For animated effects based on element position, see our guide on CSS transitions vs animations to understand how these techniques complement structural selectors.

Practical Applications

The :first-child pseudo-class excels in common web development scenarios where you need to style the first element differently from subsequent items. BrowserStack's CSS guide highlights several practical use cases for this selector.

Styling List Items

One of the most common use cases for :first-child is styling the first item in a list differently from subsequent items. This is particularly useful for removing decorative elements from the top of lists.

.nav-list li {
 border-top: 1px solid #ddd;
}

.nav-list li:first-child {
 border-top: none;
}

.feature-list li:first-child {
 font-weight: bold;
 color: #2563eb;
}

Card Layouts

In card-based layouts, :first-child allows you to apply specific styling to the first card, often used to highlight featured content or create visual hierarchy.

.card {
 padding: 1.5rem;
 margin-bottom: 1rem;
}

.card:first-child {
 margin-top: 0;
 border-left: 4px solid #2563eb;
}

.card:first-child::before {
 content: "Featured";
 display: inline-block;
 padding: 0.25rem 0.5rem;
 background: #2563eb;
 color: white;
 font-size: 0.75rem;
 border-radius: 4px;
 margin-bottom: 0.5rem;
}

Navigation Menus

Horizontal navigation menus commonly use :first-child to remove spacing or borders from the first menu item.

.nav-menu a {
 padding: 0.75rem 1rem;
 border-right: 1px solid #ddd;
}

.nav-menu a:first-child {
 border-right: none;
 padding-left: 0;
}

Article Paragraphs

In article layouts, :first-child is commonly used to style the first paragraph (lede) with larger font size or different styling to draw readers in.

.article-content p {
 font-size: 1rem;
 line-height: 1.75;
 margin-bottom: 1.5rem;
}

.article-content p:first-child {
 font-size: 1.25rem;
 font-weight: 600;
 line-height: 1.6;
}

Form Elements

For form layouts, :first-child can style the first input or label, useful for removing top margins from form groups.

.form-group {
 margin-bottom: 1rem;
}

.form-group:first-child {
 margin-top: 0;
}

These patterns are essential techniques for creating polished, professional interfaces. Our web development services team applies these CSS fundamentals alongside modern layout techniques like CSS Grid and Flexbox to build responsive, accessible websites.

Performance Considerations

The :first-child pseudo-class is highly performant because it is a simple structural selector that browsers can evaluate efficiently during DOM tree traversal. Unlike more complex selectors that require looking ahead or behind, :first-child only needs to check if an element has any preceding siblings.

Selector Efficiency

According to MDN's documentation, structural selectors like :first-child are optimized by browser engines for fast evaluation. For optimal performance:

1. Keep selectors simple - li:first-child is more performant than deeply nested compound selectors like .container .wrapper ul li:first-child
2. Avoid over-qualification - .list-item:first-child is redundant if .list-item is unique enough in your document
3. Use efficient matching - Combine :first-child with class selectors rather than deep descendant selectors

Reflow and Repaint Considerations

When using :first-child to modify layout properties like margins and paddings, be aware that these changes can trigger reflows. For animations or transitions, consider using GPU-accelerated properties:

/* Better for performance - uses GPU-accelerated properties */
.card:first-child {
 transform: scale(1.02);
 opacity: 0.98;
}

/* May trigger reflow - avoids this pattern */
.card:first-child {
 width: 102%;
 margin-left: -1%;
}

Modern CSS Layouts

In modern CSS layouts using Flexbox and Grid, :first-child works seamlessly to target the first item without performance concerns:

/* Grid layout - first item spans full width */
.grid-container > *:first-child {
 grid-column: 1 / -1;
}

/* Flex layout - first item won't shrink */
.flex-container > *:first-child {
 flex-shrink: 0;
}

The performance characteristics of :first-child make it suitable for use in responsive designs and complex layouts where it can replace additional JavaScript-based solutions. For responsive first-item styling across breakpoints, learn more about CSS media queries to combine these techniques effectively.

Common Mistakes and How to Avoid Them

Mistake 1: Confusing :first-child with :first-of-type

This is the most common confusion developers encounter. Remember the fundamental difference:

• :first-child = first child of the parent (regardless of element type)
• :first-of-type = first of its specific element type

If you have a <div> containing a heading followed by paragraphs, p:first-child will NOT match because the first child is the heading, not a paragraph.

Mistake 2: Expecting :first-child to Work Without a Parent

The :first-child pseudo-class requires a parent element. If an element is orphaned (has no parent in the DOM), :first-child will not match. This commonly occurs with dynamically added content or fragments.

Mistake 3: Not Considering Text Nodes

Whitespace or text nodes between HTML elements can be counted as children, preventing :first-child from matching the expected element. This is especially common when elements are written on separate lines:

<!-- Whitespace text node may be first child -->
<div>
 <p>First paragraph</p>
</div>

<!-- No whitespace = first child matches -->
<div><p>First paragraph</p></div>

Modern CSS layout methods like Flexbox and Grid treat whitespace differently, which can help avoid this issue.

Mistake 4: Overusing :first-child for Layout

While :first-child is powerful, overusing it for structural layout can make CSS hard to maintain. For complex layouts requiring asymmetric designs, consider using utility classes or CSS custom properties instead of relying heavily on :first-child.

Debugging Tips

1. Use browser DevTools - Inspect the element and check if it has any preceding siblings in the Elements panel
2. Verify DOM structure - Sometimes JavaScript or server-side rendering creates unexpected node structures
3. Test with a visible style - Apply a temporary background color to confirm matching behavior
4. Check for nested containers - The first child is relative to the immediate parent, not ancestors

Advanced Techniques

Combining with Other Pseudo-Classes

:first-child can be combined with other pseudo-classes for more specific targeting and powerful conditional styling:

/* First child that is also the last child (only child) */
li:first-child:last-child {
 border: none;
 text-align: center;
}

/* First child in a specific hover state */
li:first-child:hover {
 background-color: #f0f9ff;
}

/* First child with a specific class */
li.featured:first-child {
 color: #2563eb;
}

Using :not() with :first-child

The :not() pseudo-class allows for inverse matching, useful when you want to style all elements except the first:

/* Style all except the first child */
li:not(:first-child) {
 border-top: 1px solid #ddd;
}

/* Complex negation */
li:not(:first-child):not(:last-child) {
 padding: 0.5rem 1rem;
}

Responsive Design Patterns

Combine :first-child with media queries for adaptive layouts that change based on viewport size:

@media (min-width: 768px) {
 .grid > *:first-child {
 grid-column: span 2;
 }
}

@media (max-width: 767px) {
 .card:first-child {
 margin-top: 0;
 }
}

Working with Nested Elements

For nested structures like multi-level navigation or tree views, :first-child works at each nesting level independently:

/* First item at any nesting level */
ul li:first-child {
 margin-top: 0;
}

/* Only direct first child of main list */
ul > li:first-child {
 padding-left: 0;
}

Modern CSS Applications

With modern CSS features, :first-child enables sophisticated layout patterns:

/* Hero section pattern */
.hero > *:first-child {
 font-size: clamp(2rem, 5vw, 4rem);
 line-height: 1.1;
}

/* Featured article pattern */
.article-feed > article:first-child {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
}

.article-feed > article:first-child img {
 grid-column: 1;
}

.article-feed > article:first-child .content {
 grid-column: 2;
}

Mastering these advanced techniques allows you to create elegant, maintainable stylesheets. Combined with CSS variables and modern layout systems, :first-child becomes an essential tool in your CSS toolkit for building professional websites.