In-depth Analysis of CSS Child Combinator and :first-child Pseudo-class

Problem Background and Phenomenon Analysis

In practical web development, precise control of CSS selectors is crucial for achieving expected styling effects. Consider the following HTML structure:

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

The developer attempts to use the DIV.section DIV:first-child selector to select only the first direct child div element under the .section element, specifically the "header" div. However, in practice, the style is applied not only to the "header" div but also unexpectedly to the "sub contents 1" div.

Selector Semantics Analysis

To understand this phenomenon, it is essential to deeply analyze the semantics of CSS selectors. The DIV.section DIV:first-child selector actually means: select all div elements that are the first child of their parent element and are located inside a div element with the class section.

In the provided HTML structure:

• The "header" div is the first child of its parent element .section
• The "sub contents 1" div is the first child of its parent element (the second div)

Therefore, both div elements satisfy the :first-child condition, causing the style to be applied to both.

Solution: Application of Child Combinator

To achieve the goal of selecting only direct child elements, the CSS child combinator > must be used.

Selecting All Direct Child div Elements

If you need to select all direct child div elements under the .section element, use:

div.section > div {
  /* style properties */
}

This selector only matches div elements that are direct children of the .section element, specifically the "header" div and the div containing "contents".

Selecting the First Direct Child div Element

If you only need to select the first direct child div element (i.e., the "header" div), use:

div.section > div:first-child {
  /* style properties */
}

This selector combines the child combinator with the :first-child pseudo-class to precisely match the div that is the first direct child of the .section element.

Technical Specifications of Child Combinator

According to CSS selector specifications, the child combinator > is used to establish a parent-child relationship between two selectors. Its syntax is:

selector1 > selector2 { style properties }

Here, elements matched by selector2 must be direct children of elements matched by selector1. This contrasts sharply with the descendant combinator (separated by a space), which matches all descendant elements at any level.

Practical Application Examples

Consider the following more complex example to deepen understanding:

<div class="container">
  <span>Direct child span</span>
  <div>
    <span>Nested span</span>
  </div>
</div>

Using different selectors produces different effects:

• .container span: Selects all span elements (both direct and nested)
• .container > span: Selects only direct child span elements

Browser Compatibility Considerations

The child combinator > is widely supported in modern browsers. Since July 2015, all major browsers have fully supported this feature. The only exception is Internet Explorer 6. If a project requires IE6 support, alternative approaches are recommended, such as adding specific class names to child elements:

<div class="section">
   <div class="header">header</div>
   <div class="content">
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

Then use class selectors:

div.section .header {
  /* style properties */
}

Best Practice Recommendations

Based on the above analysis, the following CSS selector usage recommendations are proposed:

1. Clarify Selection Intent: Before using a selector, clearly determine whether you need to select direct children or all descendants
2. Prefer Child Combinator: When only direct children need to be selected, using > improves selection precision and performance
3. Reasonable Selector Combination: Combine the child combinator with other pseudo-classes (such as :first-child, :last-child) for more precise selection
4. Consider Compatibility: In projects requiring support for older browsers, prepare appropriate fallback solutions

Conclusion

Precise usage of CSS selectors is a fundamental skill in front-end development. By deeply understanding the differences between the child combinator > and descendant selectors, developers can more accurately control the scope of style application. In practical development, appropriate selector combinations should be chosen based on specific requirements to ensure styles take effect as expected, while considering browser compatibility requirements.