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:first-of-type
→ Todos los elementos
de su elemento primario.
Esto parece exactamente lo mismo, pero funcionan de manera diferente.
¿Podría alguien explicar por favor?
Un elemento primario puede tener uno o más elementos secundarios:
Child Child Child Child
Entre estos niños, solo uno de ellos puede ser el primero. Esto es igualado por :first-child
:
Child Child Child Child
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
:
Child Child Child Child
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
:
Child
Child Child Child
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:
Child
Child Child Child
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.
He creado un ejemplo para demostrar la diferencia entre el first-child
y el first-of-type
aquí.
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; }
Para ver el ejemplo completo, visite https://jsfiddle.net/bwLvyf3k/1/
- No selectores de CSS
- Detener una animación CSS3 en el último fotogtwig
- Clases CSS de anidamiento
- Extensiones de Google Chrome: no se pueden cargar imágenes locales con CSS
- Fuerza la actualización de los datos CSS almacenados en caché
- ¿Hay alguna manera de verificar qué estilos CSS se están utilizando o no en una página web?
- Attr () de CSS3 no funciona en los principales navegadores
- Cambiar el color y la apariencia de la flecha desplegable
- ¿Qué significa! Importante en CSS?
- ¿Cómo agregar una barra de desplazamiento a una tabla HTML5?
- ¿Soporte de cursor animado en aplicaciones web?