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

How :first-child and :first-of-Type Differ

Despite appearing equivalent, :first-child and :first-of-type exhibit subtle distinctions. Understanding these differences is crucial for effective CSS targeting.

:first-child

:first-child matches all elements that are the first child of their parent. In the example provided, it would style the first div element within its parent:

div:first-child { ... }

:first-of-type

In contrast, :first-of-type matches the first element of a specific type within its parent, regardless of whether it is the first child. Using the div tag as an example:

div:first-of-type { ... }

In this case, it would style the first div element within its parent, even if it is preceded by other types of elements, such as an h1.

Key Difference

The crucial difference lies in the scope of the comparison. :first-child considers the element's position among all its siblings, while :first-of-type focuses solely on the first instance of a particular element type within its parent.

Implications

This distinction has several implications:

• :first-child can only match a single element per parent, as there can only be one first child.
• :first-of-type can match multiple elements within a parent, as long as they are of the same type.
• :first-child is typically equivalent to :nth-child(1), but :first-of-type may match elements with higher nth-child values if other types of elements precede them.

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