¿Cómo puedo seleccionar todos los elementos secundarios de un elemento excepto el último elemento secundario?

371

¿Cómo seleccionaría todos menos el último hijo usando los selectores CSS3?

Por ejemplo, obtener solo el último hijo sería div:nth-last-child(1).

css-selectors css

— RyanScottLewis
fuente

690

Puede usar la pseudo-clase de negación:not() contra la :last-childpseudo-clase . Al haber introducido CSS Selectors Level 3, no funciona en IE8 o inferior:

:not(:last-child) { /* styles */ }

— Nick Craver
fuente

esto se usa como está? ¿Sin nada antes del primer colon?

— johny por qué el

agregaría esto a su selector de base normal ( diven el ejemplo OP)

— Dallas

2

Para aquellos que usan SASS, puede usar &:not(:last-child) { /* styles * }dentro del elemento que desea afectar.

— Martin James

100

Hazlo simple:

Puede aplicar su estilo a todos los div y reinicializar el último con : last-child :

por ejemplo en CSS :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

o en SCSS :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

fácil de leer / recordar
rápido de ejecutar
compatible con el navegador (IE9 + ya que todavía es CSS3)

— Sebastien Horin
fuente

66

Al menos para mí, esto tiene un mal olor a código. Está aplicando a sabiendas una regla css a un elemento que no desea que haga, solo para tratar de cortar otra capa para deshacerla. Para mí, ese es un mal olor de código. Me temo que ese tipo de codificación CSS puede conducir a un mantenimiento cada vez más difícil. En otras palabras, estás construyendo css spaghetti.

— Alexander Bird

1

esto también podría funcionar, pero el problema es que cuando tiene muchos estilos css como (borde, color, tamaño de fuente, etc.) deberá inicializar el estilo css nuevamente en: last-child. Entonces, la solución adecuada es usar: not (: last-child)

— davecar21

33

La solución de Nick Craver funciona pero también puedes usar esto:

:nth-last-child(n+2) { /* Your code here */ }

Chris Coyier de CSS Tricks hizo un buen : enésimo probador para esto.

— Robin B
fuente

Mozilla tiene una buena definición de : nth-last-child

— Clint Pachl

1

Algunas personas dicen que el :notpseudo es muy caro. Por lo tanto, podría ser una buena idea tratar de evitarlo siempre que sea posible.

— Neurotransmisor

22

Cuando llegue IE9, será más fácil. Sin embargo, la mayoría de las veces, puede cambiar el problema a uno que requiera: primer hijo y diseñar el lado opuesto del elemento (IE7 +).

— Nicholas Wilson
fuente

10

El uso de la solución de nick craver con selectivizr permite una solución de navegador cruzado (IE6 +)

— Delphi
fuente

1

para encontrar elementos del último, use

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

— Avinash Malhotra
fuente

1

La solución de Nick Craver me dio lo que necesitaba, pero para hacerlo explícito para aquellos que usan CSS-in-JS:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

— maddRobot
fuente

1

.nav-menu li:not(:last-child){
    // write some style here
}

este código debería aplicar el estilo a todos

excepto el último niño

— RyanGonzalezUSA
fuente