CSS - puesdo-clases diferencia

   
Vista:

puesdo-clases diferencia

Publicado por Julio Cesar (14 intervenciones) el 22/12/2017 21:45:34
¿Qué diferencia hay entre last-of-type y last-child? (igual con first-of-type y first-child)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox

puesdo-clases diferencia

Publicado por abzerox (19 intervenciones) el 23/12/2017 00:18:18
Hola Julio, en pocas palabras la pseudo-clase :first-child representa cualquier elemento que sea el primer elemento hijo del elemento padre.
Fijate en el sigiente ejemplo:

1
2
3
div:first-child {
  background-color: green;
}

1
2
3
4
5
6
<div>
  <span>Este span es el primero!</span>
  <span>Este no. :(</span>
  <span>¿Y qué pasa con este <em>elemento <span>anidado</span></em>?</span>
  <p>Esto es un parrafo </p>
</div>

En el caso anterior solo el primer span y el span dentro de la etiqueta em quedarian con fondo verde.
Por otra parte en el caso, la pseudo-clase first-of-type representa el primero de los hermanos de su tipo en la lista de hijos de su elemento padre. Es decir si al ejemplo anterior aplicamos lo siguiente seria el mismo resultado:

1
2
3
div span:first-of-type {
  background-color: green;
}

Pero si cambiamos el <span> por un <p> solo este ultimo quedaria con fondo verde.
En resumen, las pseudo-clases :first-of-type y :last-of-type permiten ser un poco flexibles ya que permiten indicar el tipo del elemento sin importar la posicion en el documento. En cambio :first-child y :last-child se centra en los elementos que ocupan la primera y ultima posicion en el documento html respecto a su elemento padre.

Referencias:
https://developer.mozilla.org/es/docs/Web/CSS/:first-of-type
https://developer.mozilla.org/es/docs/Web/CSS/:first-child
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

puesdo-clases diferencia

Publicado por Julio Cesar (14 intervenciones) el 23/12/2017 03:36:47
Gracias por tomarte tu tiempo y aclararme la duda, gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

puesdo-clases diferencia

Publicado por xve (434 intervenciones) el 23/12/2017 08:19:22
Muy bien explicado!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar