: nth-last-child - Trucchi CSS

Anonim

Il :nth-last-childselettore 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-childtranne che seleziona gli elementi a partire dalla parte inferiore dell'ordine di origine, non dalla parte superiore.

Supponiamo di avere un elenco con un numero sconosciuto di elementi e di voler evidenziare il penultimo elemento (in questo esempio esatto, il "Quarto elemento"):



    

  • 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-child:

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

Come puoi vedere, :nth-last-childaccetta 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 su tutti i figli dell'elemento padre e selezioneranno elementi corrispondenti, simili agli elementi di navigazione in un array in JavaScript. Le parole chiave "pari" e "dispari" sono semplici (2, 4, 6 ecc. O 1, 3, 5 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 :

Dai un'occhiata a questa penna!

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

  • CSS-Tricks Tester
  • Tester di Lea Verou

Punti di interesse

  • :nth-last-childitera attraverso gli elementi a partire dal fondo dell'ordine di origine. L'unica differenza tra esso ed :nth-childè che quest'ultimo itera attraverso gli elementi a partire dall'inizio dell'ordine di origine.
  • Il :nth-last-childselettore è molto simile :nth-last-of-typema con una differenza fondamentale: è meno 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. Ciò rivela il potere di :nth-last-child-it può selezionare qualsiasi elemento di pari livello in un arrangiamento, non solo gli elementi specificati prima dei due punti.

Supporto browser

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

:nth-last-childè 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.