Understanding the Difference Between CSS Selectors :first-child and :first-of-type

How the CSS Selector :first-child Works

In CSS selectors, the :first-child pseudo-class selector has a specific semantic meaning. It selects the first child element of a parent element, and requires that child element to match the element type specified before the selector. This means the selector h1:first-child actually means: select an h1 element that is the first child of its parent element.

Problem Scenario Analysis

Consider the following HTML structure:

<div class="detail_container">
    <ul>
        <li></li>
        <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>

When applying the CSS rule .detail_container h1:first-child { color: blue; }, the selector checks if the first child element of .detail_container is an h1. In this example, the first child is <ul>, not <h1>, so the selector doesn't match any elements and the style rule won't take effect.

Solution 1: Using the :first-of-type Selector

CSS3 introduced the :first-of-type pseudo-class selector, which selects the first element of a specific type within its parent. Modify the CSS rule to:

.detail_container h1:first-of-type {
    color: blue;
}

This selector looks for the first h1 element among all h1 elements within .detail_container, regardless of what elements precede it. In the HTML structure above, it correctly selects the first <h1>First H1</h1> element.

Solution 2: Adding a Class Name

Considering browser compatibility issues (particularly older browsers that may not support :first-of-type), another more reliable approach is to add a class name to the first h1 element:

<h1 class="first">First H1</h1>

Then use a class selector:

.detail_container h1.first {
    color: blue;
}

This method doesn't rely on specific CSS selector semantics and has better compatibility, but requires modifying the HTML structure.

Browser Compatibility and Best Practices

The :first-of-type selector is widely supported in modern browsers, but may not work in some older browsers (such as IE8 and earlier). If a project needs to support these browsers, the class name method is recommended. In most cases, :first-of-type is a cleaner solution as it doesn't require HTML modifications.

Key Takeaways

• :first-child selects the first child element of a parent, and it must match the specified element type
• :first-of-type selects the first element of a specific type within its parent
• :first-child won't work when the target element isn't the first child of its parent
• Adding a class name is the most compatible solution, but requires HTML modifications
• In practical development, choose the appropriate method based on project requirements and browser support

Understanding the precise semantics of CSS selectors is crucial for writing correct style rules. By deeply analyzing how selectors work, developers can avoid common pitfalls and choose the most suitable solutions for specific scenarios.