:first-child vs. :first-of-type: When Should I Use Each CSS Pseudo-class?

Sélection d'éléments avec :first-child vs. :first-of-type

En CSS, les pseudo-classes :first-child et :first-of-type sélectionnent tous deux les éléments en fonction de leur position dans leur élément parent. Cependant, ils diffèrent dans la façon dont ils définissent « premier ».

Element:first-child

:first-child sélectionne le premier élément enfant de son parent spécifié, quel que soit de son type d’élément. Dans l'exemple fourni :

div:first-child

Copier après la connexion

Ce sélecteur correspondrait à tous les fichiers

éléments qui sont le premier enfant de leur élément parent. Si l'élément parent contient d'autres types d'éléments, ils ne seront pas sélectionnés.

Element:first-of-type

:first-of-type sélectionne le premier instance d'un type d'élément spécifique au sein de son parent. Il correspondra au premier

élément, même s’il ne s’agit pas du premier enfant au total. Par exemple :

div:first-of-type

Copier après la connexion

Dans le HTML fourni :

<div class="parent">
  <div>Child</div>
  <h1>

Copier après la connexion

:first-of-type sélectionnerait le

avec la classe "parent" comme première instance d'un

élément, tandis que l'élément

avec l'identifiant "first" serait la première instance d'un

élément.

Différences clés

Hiérarchie des éléments : : correspondances du premier enfant en fonction de l'ordre des enfants, tandis que : premier de- tapez les correspondances en fonction du type d'élément et de la position dans ce type.

Nombre de correspondances : :first-child ne peut correspondre qu'à un seul élément par parent, tandis que :first-of-type peut correspondre à plusieurs éléments du même type.

Spécificité : :first-of-type a généralement spécificité plus élevée que :first-child, ce qui signifie qu'il aura la priorité dans les règles CSS.

Exemple Utilisation

Utilisez :first-child pour sélectionner :

Le premier élément d'une liste non ordonnée : ul li:first-child

Le titre du premier article de blog dans une liste : article .blog-post:first-child h2

Utilisez :first-of-type pour sélectionner :

Le premier titre (
,
, etc. .) dans un document : body :first-of-type

Le premier bouton d'un formulaire : form bouton : premier du type

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!

source：php.cn

Article précédent：Comment puis-je garantir la visibilité de la barre de défilement sur macOS pour les utilisateurs de trackpad dans les navigateurs WebKit/Blink ? Article suivant：Comment puis-je effectuer correctement un habillage de texte dans un conteneur HTML à largeur fixe ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2176

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2329

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1959

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...