css - only - ¿Cuál es la diferencia entre: first-child y: first-of-type?

li first child addclass css

Question

No puedo distinguir la diferencia entre los element:first-child y element:first-of-type

Por ejemplo, di, tenías un div

div:first-child
→ Todos los elementos <div> que son el primer hijo de su padre.

div:first-of-type
→ Todos los elementos <div> que son el primer elemento <div> de su elemento primario.

Esto parece exactamente lo mismo, pero funcionan de manera diferente.

¿Podría alguien explicar por favor?

Answer 1

He creado un ejemplo para demostrar la diferencia entre el first-child y el first-of-type aquí.

HTML

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

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

Para ver el ejemplo completo, visite https://jsfiddle.net/bwLvyf3k/1/

Answer 2

Un elemento primario puede tener uno o más elementos secundarios:

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

Entre estos niños, solo uno de ellos puede ser el primero. Esto es igualado por :first-child :

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

La diferencia entre :first-child y :first-of-type es que :first-of-type coincidirá con el primer elemento de su tipo de elemento, que en HTML se representa con su nombre de etiqueta, incluso si ese elemento no es el primero hijo del padre . Hasta el momento los elementos secundarios que estamos viendo han sido todos div , pero tengan paciencia conmigo, voy a llegar a eso en un momento.

Por ahora, lo contrario también es cierto: cualquiera :first-child también es :first-of-type por necesidad. Dado que el primer hijo aquí también es el primer div , coincidirá con ambas pseudoclases, así como con el selector de tipo div :

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

Ahora, si cambia el tipo del primer hijo de div a otra cosa, como h1 , seguirá siendo el primer hijo, pero ya no será el primer div obviamente; en cambio, se convierte en el primero (y único) h1 . Si hay otros elementos div que sigan a este primer hijo dentro del mismo padre, el primero de esos elementos div:first-of-type coincidirá con div:first-of-type . En el ejemplo dado, el segundo hijo se convierte en el primer div después de que el primer hijo se cambia a un h1 :

<div class="parent">
<h1>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>

Tenga en cuenta que :first-child es equivalente a :nth-child(1) .

Esto también implica que, si bien cualquier elemento puede tener un solo elemento secundario coincidente :first-child a la vez, puede tener tantos hijos que coincidan con la :first-of-type pseudo clase como la cantidad de tipos de hijos tiene. En nuestro ejemplo, el selector .parent > :first-of-type (con una calificación implícita * :first-of-type pseudo) hará coincidir dos elementos, no solo uno:

<div class="parent">
<h1>Child</h1> <!-- .parent > :first-of-type -->
<div>Child</div> <!-- .parent > :first-of-type -->
<div>Child</div>
<div>Child</div>
</div>

Lo mismo vale para :last-child y :last-of-type : any :last-child es necesariamente también :last-of-type , ya que absolutamente ningún otro elemento lo sigue dentro de su padre. Sin embargo, dado que el último div es también el último hijo, h1 no puede ser el último hijo, a pesar de ser el último de su tipo.