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


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

Por ejemplo, di, tenías un div

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

div:first-of-type
→ Todos <div> elementos que son los primeros <div> elemento de su padre

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

¿Podría alguien explicar por favor?


75
2017-07-09 15:19


origen


Respuestas:


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 eso :first-of-type coincidirá con el primer elemento de su tipo de elemento, que en HTML está representado por su nombre de etiqueta, incluso si ese elemento no es el primer hijo del padre. Hasta ahora, los elementos secundarios que estamos viendo han sido todos divs, pero tengan paciencia conmigo, voy a llegar a eso en un momento.

Por ahora, lo contrario también es cierto: cualquier :first-child es también :first-of-type por necesidad. Dado que el primer hijo aquí también es el primero div, coincidirá ambos pseudo-clases, así como 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 de primer hijo de div a otra cosa, como h1, seguirá siendo el primer hijo, pero ya no será el primero div obviamente; en cambio, se convierte en el primero (y único) h1. Si hay otro div elementos que siguen a este primer hijo dentro del mismo padre, el primero de esos div los elementos coincidirán div:first-of-type. En el ejemplo dado, el segundo hijo se convierte en el primero div después de que el primer niño sea cambiado a 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 solo puede tener un solo elemento secundario que coincida :first-child a la vez, puede y tendrá tantos hijos que coincidan con :first-of-type pseudo-clase como la cantidad de tipos de hijos que tiene. En nuestro ejemplo, el selector .parent > :first-of-type (con un implícito * calificando el :first-of-type pseudo) 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 es cierto para :last-child y :last-of-type: alguna :last-child es por necesidad también :last-of-type, ya que absolutamente ningún otro elemento lo sigue dentro de su padre. Sin embargo, porque el último div es también el último niño, el h1 no puede ser el último hijo, a pesar de ser el último de su tipo.


132
2017-07-09 15:27



He creado un ejemplo para demostrar la diferencia entre first-child y 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, por favor visite https://jsfiddle.net/bwLvyf3k/1/


9