: nth-last-of-type - Trucchi CSS

Il :nth-last-of-typeselettore consente di selezionare uno o più elementi in base al loro ordine di origine, secondo una formula. È definita nella specifica CSS Selectors Level 3 come una "pseudo-classe strutturale", nel senso che viene utilizzata per definire lo stile del contenuto in base alla sua relazione con gli elementi padre e fratello. Funziona allo stesso modo :nth-of-typetranne che seleziona gli elementi a partire dalla parte inferiore dell'ordine di origine, non dalla parte superiore.

Supponiamo di avere un elenco non ordinato e di voler evidenziare il penultimo elemento (in questo esempio esatto, il "Quarto articolo"):



First Item
Second Item
Third Item
Fourth Item
Fifth Item

Piuttosto che fare qualcosa come aggiungere una classe all'elemento dell'elenco (ad esempio .highlight) possiamo usare :nth-last-of-type:

li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )

Come puoi vedere, :nth-last-of-typeaccetta un argomento: questo può essere un singolo numero intero, le parole chiave "pari" o "dispari" o una formula. Se viene specificato un numero intero, viene selezionato un solo elemento, ma le parole chiave o una formula itereranno attraverso tutti i figli dell'elemento padre e selezioneranno gli elementi corrispondenti, in modo simile alla navigazione degli elementi in un array in JavaScript. Le parole chiave "pari" e "dispari" sono semplici (2, 4, 6, ecc. O 1, 3, 5 ecc. Rispettivamente). La formula è costruita utilizzando la sintassi an+b, dove:

"A" è un valore intero
"N" è la lettera letterale "n"
"+" È un operatore e può essere "+" o "-"
"B" è un numero intero ed è richiesto se un operatore è incluso nella formula

È importante notare che questa formula è un'equazione e itera attraverso ogni elemento di pari livello, determinando quale sarà selezionato. La parte "n" della formula, se inclusa, rappresenta un insieme di numeri interi positivi crescenti (proprio come l'iterazione di un array). Nel nostro esempio precedente, abbiamo selezionato ogni secondo elemento con la formula 2n, che ha funzionato perché ogni volta che un elemento è stato controllato, "n" è aumentato di uno (2 × 0, 2 × 1, 2 × 2, 2 × 3, ecc.). Se l'ordine di un elemento corrisponde al risultato dell'equazione, viene selezionato (2, 4, 6, ecc.). Per una spiegazione più approfondita della matematica coinvolta, leggi questo articolo.

Per illustrare ulteriormente, ecco alcuni esempi di :nth-last-of-typeselettori validi :

Vedi Pen CSS-Tricks:: nth-last-of-type di Chris Coyier (@chriscoyier) su CodePen.

Fortunatamente, non devi sempre fare i conti da solo: ci sono diversi :nth-last-of-typetester e generatori là fuori:

CSS-Tricks Tester
Tester di Lea Verou

Punti di interesse

:nth-last-of-typeitera attraverso gli elementi a partire dal fondo dell'ordine di origine. L'unica differenza tra esso ed :nth-of-typeè che quest'ultimo itera attraverso gli elementi a partire dal fondo dell'ordine di origine.
Il :nth-last-of-typeselettore è molto simile :nth-last-childma con una differenza fondamentale: è più specifico. Nel nostro esempio sopra, produrranno lo stesso risultato perché stiamo iterando solo su lielementi, ma se stessimo iterando su un gruppo più complesso di fratelli, :nth-last-childproveremmo a far corrispondere tutti i fratelli, non solo i fratelli dello stesso tipo di elemento. Questo rivela il potere di :nth-last-of-type-it prende di mira un particolare tipo di elemento in un accordo con fratelli simili, non tutti i fratelli.

Supporto browser

Cromo	Safari	Firefox	musica lirica	IE	Android	iOS
Lavori	3.2+	Lavori	9.5+	9+	Lavori	Lavori

:nth-last-of-typeè stato introdotto nel modulo 3 dei selettori CSS, il che significa che le vecchie versioni dei browser non lo supportano. Tuttavia, il supporto del browser moderno è impeccabile ei nuovi pseudo-selettori sono ampiamente utilizzati negli ambienti di produzione. Se è necessario il supporto di browser meno recenti, utilizzare polyfill per IE o utilizzare questi selettori in modi non critici, come consigliato dal miglioramento progressivo.