Quelle est la différence entre les sélecteurs CSS `:first-child` et `:first-of-type` ?

Comment :premier-enfant et :premier-de-type diffèrent

Malgré l'équivalent apparent, :premier-enfant et :premier-de -type présentent des distinctions subtiles. Comprendre ces différences est crucial pour un ciblage CSS efficace.

:first-child

:first-child correspond à tous les éléments qui sont le premier enfant de leur parent. Dans l'exemple fourni, il styliserait le premier élément div au sein de son parent :

div:first-child { ... }

:first-of-type

En revanche, :first-of -type correspond au premier élément d'un type spécifique au sein de son parent, qu'il s'agisse ou non du premier enfant. En utilisant la balise div comme exemple :

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

Dans ce cas, elle styliserait le premier élément div de son parent, même s'il est précédé d'autres types d'éléments, comme un h1.

Différence clé

La différence cruciale réside dans la portée de la comparaison. :first-child considère la position de l'élément parmi tous ses frères et sœurs, tandis que :first-of-type se concentre uniquement sur la première instance d'un type d'élément particulier au sein de son parent.

Implications

Cette distinction a plusieurs implications :

•  : first-child ne peut correspondre qu'à un seul élément par parent, car il ne peut y avoir qu'un seul premier child.
• :first-of-type peut correspondre à plusieurs éléments au sein d'un parent, à condition qu'ils soient du même type.
• :first-of-child est généralement équivalent à :nth-child (1), mais :first-of-type peut correspondre à des éléments avec des valeurs nième enfant plus élevées si d'autres types d'éléments les précèdent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!