MultiDev
:last-child funciona muy bien cuando todos los elementos “hijos” son iguales (es decir, todos <p>es o todo <li>‘s y la regla se aplica a ese tipo de niño.
Pero, ¿cómo puedo usar CSS para seleccionar el último elemento “secundario” dentro de un padre que contiene elementos variables?
Por ejemplo, en este ejemplo, ¿cómo podría aplicar una regla a la .parent para seleccionar el último objeto dentro de él (el div)?
.parent:last-child {
background-color: red;
}<div class="parent">
<p>First child</p>
<input type="text" placeholder="Second child" />
<div>Third child</div>
</div>Puedes usar .parent > *:last-child o solo .parent > :last-child
Un asterisco
.parent > *:last-child {
background-color: red;
}<div class="parent">
<p>First child</p>
<input type="text" placeholder="Second child" />
<div>Third child</div>
</div>-
es el selector universal para CSS. Coincide con un solo elemento de cualquier tipo. Omitir el asterisco con selectores simples tiene el mismo efecto.
.parent>:last-childMe pregunto por qué no funciona cuando se usa como??
– abdullahicyc
La regla que tienes busca seleccionar un elemento con la clase.
parentque es el último hijo de algún otro elemento. Añade un espacio entre ellos.– j08691
23 de enero de 2017 a las 18:49
@Mr Lister: O simplemente
.parent>:last-child(su selector coincidirá con el cuerpo)– BoltClock
24 de enero de 2017 a las 5:48