Quelle est la difference entre: first-child et: first-of-type?

Je ne peux pas faire la différence entre element:first-child et element:first-of-type

Par exemple, disons que vous aviez une div

div:first-child
→ Tous les éléments

qui sont le premier enfant de leur parent.

div:first-of-type
→ Tous les éléments

qui sont le premier élément

de leur parent.

Cela semble être exactement la même chose, mais ils fonctionnent différemment.

Quelqu’un pourrait-il expliquer s’il vous plaît?

Un élément parent peut avoir un ou plusieurs éléments enfants:

 
Child
Child
Child
Child

Parmi ces enfants, un seul peut être le premier. Ceci est égal à :first-child :

 
Child
Child
Child
Child

La différence entre :first-child et :first-of-type est que :first-of-type correspondra au premier élément de son type d’élément, qui en HTML est représenté par son nom de tag, même si cet élément n’est pas le premier. enfant du parent . Jusqu’à présent, les éléments enfants que nous examinons ont tous été div , mais soyez d’accord avec moi, j’y viendrai un peu.

Pour l’instant, l’inverse est également vrai: n’importe lequel :first-child est aussi :first-of-type par nécessité. Comme le premier enfant est aussi le premier div , il correspondra aux deux pseudo-classes, ainsi qu’au div sélecteur de type:

 
Child
Child
Child
Child

Maintenant, si vous changez le type du premier enfant de div en autre chose, comme h1 , ce sera toujours le premier enfant, mais ce ne sera plus le premier div évidemment. au lieu de cela, il devient le premier (et le seul) h1 . S’il y a d’autres éléments div après ce premier enfant dans le même parent, le premier de ces éléments div:first-of-type correspondra à div:first-of-type . Dans l’exemple donné, le deuxième enfant devient le premier div après le changement du premier enfant en h1 :

 

Child

Child
Child
Child

Notez que :first-child est équivalent à :nth-child(1) .

Cela implique également que, même si un élément quelconque ne peut avoir qu’un seul élément enfant correspondant :first-child à la fois, il peut et aura autant d’enfants correspondant à la pseudo-classe :first-of-type que le nombre de types d’enfants qu’il contient. a. Dans notre exemple, le sélecteur .parent > :first-of-type (avec une implicite * qualifiant le pseudo :first-of-type ) correspondra à deux éléments, pas un seul:

 

Child

Child
Child
Child

La même chose est vraie pour :last-child et :last-of-type : any :last-child est nécessairement aussi :last-of-type , car aucun autre élément ne le suit dans son parent. Cependant, comme le dernier div est aussi le dernier enfant, le h1 ne peut pas être le dernier enfant, bien qu’il soit le dernier de son type.

J’ai créé un exemple pour démontrer la différence entre le first-child et le first-of-type ici.

HTML

 

Child

Child
Child
Child

CSS

 .parent :first-child { color: red; } .parent :first-of-type { background: yellow; } .parent p:first-child { text-decoration: line-through; } // Does not work .parent div:first-child { font-size: 20px; } // Use this instead .parent div:first-of-type { text-decoration: underline; } // This is second child regardless of its type .parent div:nth-child(2) { border: 1px black solid; } 

Pour voir l’exemple complet, veuillez visiter https://jsfiddle.net/bwLvyf3k/1/