Seleziona il secondo ultimo elemento con css

135

Conosco già: ultimo figlio. Ma c'è un modo per selezionare il div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

NOTA: senza jQuery, solo con CSS

html css css-selectors

— dinamico
fonte

Sicuramente c'è qualche logica sul perché il penultimo figlio è significativo?

— David Tang,

sì, devo selezionare sia l'ultimo sia il penultimo per applicare alcuni stili

— dinamico

perché non puoi semplicemente mettere una lezione al 2 ° ultimo div

— Daveo

"Perché non puoi semplicemente mettere una classe sul 2 ° ultimo div": Forse se arrivi allo stile dei contenuti che vengono generati, in cui non hai (facile) accesso per aggiungere una classe al secondo ultimo elemento?

— Henrik

Risposte:

271

In CSS3 hai:

:nth-last-child(2)

Vedi: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

Supporto browser nth-last-child :

Chrome 2

Firefox 3.5

Opera 9.5, 10

Safari 3.1, 4

Internet Explorer 9

— Frosty Z
fonte

Questo è probabilmente il modo migliore se non puoi associare una classe al div che stai provando a selezionare. Come ha detto Frosty, CSS3 non è supportato da browser o IE precedenti. Jquery è un'opzione molto migliore se sei preoccupato per la calcolabilità tra browser.

— Thomas

Era una copia / incolla dall'articolo collegato ... Risposta modificata, grazie.

— Frosty Z,

soluzione in css: #container>: nth-last-child (2) {background: red;} Controlla questo codice per vederlo dal vivo: codepen.io/marc_dahan/pen/JyxObz

— marcdahan

Ora che non abbiamo bisogno di supportare IE più vecchi, questa risposta funzionerà perfettamente. Onestamente, se le persone usano ancora IE 8 e versioni precedenti, non meritano di avere cose carine.

— Stender

Nota: ha pubblicato questa risposta perché in seguito OP ha dichiarato nei commenti che deve selezionare gli ultimi due elementi , non solo il penultimo.

Il :nth-childselettore CSS3 è infatti più capace di quanto tu abbia mai immaginato!

Ad esempio, questo selezionerà gli ultimi 2 elementi di #container:

#container :nth-last-child(-n+2) {}

Ma questo è solo l'inizio di una bella amicizia.

:nth-child Supporto per il browser

Mostra snippet di codice

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

Espandi frammento

— Kapa
fonte

Bello, la mia risposta seleziona solo l'ultimo figlio meno 1. Non lo sapevo. + 'd

— rsplak