Come posso selezionare tutti i figli di un elemento tranne l'ultimo figlio?

371

Come selezionerei tutto tranne l'ultimo figlio usando i selettori CSS3?

Ad esempio, per ottenere solo l'ultimo figlio sarebbe div:nth-last-child(1).

css-selectors css

— RyanScottLewis
fonte

690

È possibile utilizzare la pseudo-classe di negazione:not() contro la :last-childpseudo-classe . In fase di introduzione dei selettori CSS livello 3, non funziona in IE8 o inferiore:

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

— Nick Craver
fonte

questo è usato così com'è? Senza nulla prima del primo colon?

— johny perché

aggiungeresti questo al tuo normale selettore di base ( divnell'esempio OP)

— Dallas,

2

Per quelli che usano SASS, puoi usare &:not(:last-child) { /* styles * }all'interno dell'elemento che vuoi influenzare.

— Martin James,

100

Falla semplice:

Puoi applicare il tuo stile a tutti i div e inizializzare di nuovo l'ultimo con : last-child :

ad esempio nei CSS :

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

o in SCSS :

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

facile da leggere / ricordare
veloce da eseguire
compatibile con browser (IE9 + poiché è ancora CSS3)

— Sebastien Horin
fonte

6

Almeno per me, questo ha un cattivo odore di codice. Stai consapevolmente applicando una regola CSS a un elemento che non vuoi che sia, solo per poi provare a tagliare un altro livello per annullarlo. Per me è un cattivo odore di codice. Temo che quel tipo di codifica CSS possa portare a mantenere il CSS sempre più difficile. In altre parole, stai costruendo spaghetti code css.

— Alexander Bird,

1

questo potrebbe anche funzionare ma il problema è che quando hai molti stili CSS (bordo, colore, dimensione del carattere ecc.) dovrai inizializzare nuovamente lo stile CSS su: last-child. Quindi la soluzione adatta sta usando: not (: last-child)

— davecar21,

33

La soluzione di Nick Craver funziona ma puoi anche usare questo:

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

Chris Coyier di CSS Tricks ha fatto un bel : ennesimo tester per questo.

— Robin B.
fonte

Mozilla ha una buona definizione di : nth-last-child

— Clint Pachl

1

Alcune persone dicono che lo :notpseudo è molto costoso. Quindi potrebbe essere una buona idea cercare di evitarlo dove possibile.

— Neurotrasmettitore

22

Quando arriverà IE9, sarà più facile. Molte volte, tuttavia, è possibile passare da un problema a uno che richiede: primo figlio e stile del lato opposto dell'elemento (IE7 +).

— Nicholas Wilson
fonte

10

L'uso della soluzione di nick craver con selectivizr consente una soluzione cross browser (IE6 +)

— Delphi
fonte

1

per trovare elementi dall'ultimo, utilizzare

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

— Avinash Malhotra
fonte

1

La soluzione di Nick Craver mi ha dato ciò di cui avevo bisogno, ma per renderlo esplicito per coloro che usano 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
fonte

1

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

questo codice dovrebbe applicare lo stile a tutti

tranne l'ultimo figlio

— RyanGonzalezUSA
fonte