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 2 comentarios

Deja un comentario

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