Selector CSS: Cómo Seleccionar Todos los Elementos de una Lista Excepto el Último Child

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

Deja un comentario