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

La distinction subtile entre :first-child et :first-of-type

Comprendre la nuance entre :first-child et :first -of-type peut être essentiel dans le style CSS. Malgré leurs sélecteurs à consonance similaire, ces deux éléments donnent des résultats distincts.

Relation parent-enfant : un examen plus approfondi

Chaque élément d'un élément parent peut avoir plusieurs éléments enfants. . Parmi ces enfants, un seul peut prétendre à la distinction d’être le premier enfant. Ce trait exclusif est capturé par :first-child:

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

Le pouvoir de :first-of-type

Où :first-child se concentre sur l'identification du first child, :first-of-type a un objectif plus spécifique : il cible le premier élément d'un type particulier, quel que soit son placement en tant qu'enfant. Considérons un scénario où le type en question est div :

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

Dans cet exemple, :first-child et :first-of-type identifient le même élément puisqu'il s'agit à la fois du premier enfant et du premier div. Cependant, si nous introduisons un élément h1 comme premier enfant :

<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>

Le h1, en raison de son statut de premier enfant, satisfait à l'exigence :first-child. Cependant, ce n'est plus la première division. Par conséquent, le premier div devient la correspondance :first-of-type pour div.

Point clé à retenir

:first-child identifie le premier enfant, alors que :first- of-type localise le premier élément d'un type particulier, quelle que soit sa position en tant qu'enfant. Cette distinction est cruciale lorsqu'on cible des éléments spécifiques en fonction à la fois de leur ordre de naissance et de leur type inhérent.

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!