CSS: Seleccionar toda una lista excepto last-child

CSS: Seleccionar toda una lista excepto last-child

5/5 (2)

Sencillo truco CSS para seleccionar todos los elementos de una lista menos :last-child con pseudoclases..

En los menús verticales suele ser común aplicar un estilo diferente al último item que al resto, por ejemplo un border-bottom en todos los items menos en el último. Aquí tienes una demostración de lo sencillo y poderoso que es CSS:


.lista:not(:last-child) {
  /* Aquí los estilos */
}

Donde .lista es una lista desordenada del estilo:


<ul class="lista">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

 

El código CSS sólo nos seleccionará los 4 primeros items para diferenciarlos del último, por si queremos ponerle estilos diferentes.

Como puedes ver, el uso de las pseudoclases es muy útil y se pueden concatenar, con lo que se obtienen resultados espectaculares.

Fuente: WP-Mix

Por favor, valora este artículo

Esta entrada tiene un comentario

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.