What's the Difference Between CSS's `:first-child` and `:first-of-type` Selectors?

The Subtle Distinction Between :first-child and :first-of-type

Understanding the nuance between :first-child and :first-of-type can be pivotal in CSS styling. Despite their similar-sounding selectors, these two yield distinct results.

Parent-Child Relationship: A Closer Look

Every element within a parent element can have multiple child elements. Among these children, only one can claim the distinction of being the first child. This exclusive trait is captured by :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

The Power of :first-of-type

Where :first-child focuses on identifying the first child, :first-of-type has a more specific purpose: it targets the first element of a particular type, regardless of its placement as a child. Consider a scenario where the type in question is div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

In this example, both :first-child and :first-of-type identify the same element since it is both the first child and the first div. However, if we introduce an h1 element as the first child:

<div class="parent">
  <h1 id="Child">Child</h1> <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

The h1, due to its first-child status, satisfies the :first-child requirement. However, it is no longer the first div. Consequently, the first div becomes the :first-of-type match for div.

Key Takeaway

:first-child pinpoints the first child, whereas :first-of-type locates the first element of a particular type, irrespective of its position as a child. This distinction is crucial when targeting specific elements based on both their birth order and their inherent type.

The above is the detailed content of What's the Difference Between CSS's `:first-child` and `:first-of-type` Selectors?. For more information, please follow other related articles on the PHP Chinese website!