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

Élucider la distinction entre :first-child et :first-of-type

Malgré leurs définitions apparemment similaires, :first-child et :first-of-type diffèrent considérablement dans leurs critères de sélection. Pour parvenir à une compréhension globale, explorons les nuances qui les distinguent.

Premier enfant vs premier du type

 : le premier enfant identifie le premier élément de n'importe quel type au sein de son élément parent. . D'un autre côté, :first-of-type cible spécifiquement le premier élément de son propre type au sein de son élément parent.

Considérez l'extrait HTML suivant :

<div class="parent">
  <div>Child 1</div>
  <div>Child 2</div>
  <p>Paragraph</p>
</div>

Dans cet exemple, le sélecteur '.parent > div:first-child' correspondrait à l'élément avec le texte « Child 1 » car il s'agit du premier enfant de l'élément « .parent ». Pendant ce temps, le sélecteur '.parent > div:first-of-type' correspondrait également à "Child 1" car il s'agit du premier élément du type 'div' au sein du parent.

Implications de la distinction

:first- child donne la priorité à l'ordre des enfants dans l'élément parent, tandis que :first-of-type se concentre sur le type de l'élément quelle que soit sa position parmi ses frères et sœurs. Cette distinction peut avoir des ramifications dans les scénarios où les éléments enfants appartiennent à des types différents.

Si le premier enfant de notre exemple est remplacé par un élément 'h1', la sélection :first-child le ciblera toujours. Cependant, :first-of-type correspondrait désormais au premier élément 'div', sautant effectivement le 'h1' en raison de son type différent.

Résumé

Pour résumer, :first-child représente le premier enfant quel que soit le type, tandis que :first-of-type cible spécifiquement le premier élément d'un type spécifique. Cette distinction permet une plus grande flexibilité et précision dans la sélection des éléments HTML en fonction de leur position et de leur type au sein de l'élément parent.

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!