Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di leaf
    Registrato dal
    Oct 2012
    Messaggi
    316

    chiarimento su :nth-child(n)

    ciao, poniamo che io abbia una tabella con 12 righe. Voglio selezionare a gruppi di 3, le terze colonne (cioè i <td>) di ogni riga.

    allora, per le prime 3 uso questo codice
    codice:
    tr:nth-child(-n+3) td:nth-child(3){
    ...
    }
    per le ultime 3 uso questo
    codice:
    tr:nth-last-child(-n+3) td:nth-child(3){
    ...
    }
    ma come faccio a selezionare il gruppo 4-5-6 e il gruppo 7-8-9?

    premesso che potrei selezionarle una ad una con nth-child(5/6/7 ecc), volevo sapere se c'è un modo meno lungo di farlo.

    ho letto varie guide ma non ho trovato una soluzione..magari mi sono perso qualcosa

    grazie,
    L.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao, prova in questo modo:

    codice:
    tr:nth-child(n+4):nth-child(-n+6) td:nth-child(3){
    ...
    }
    In sostanza vengono selezionate le righe dalla 4 alla 6, dove il primo nth-child identifica l'elemento iniziale e il secondo quello finale.
    In pratica, col primo sono prese le righe dalla 4 in poi, mentre col secondo sono prese le righe dalla 6 in su, escludendo le restanti righe e mantenendo comunque escluse le prime 3 che non erano state contate col primo.
    Il risultato è uguale anche invertendo i due :nth-child. In poche parole i due risultati si "intersecano" (se così si può dire).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it L'avatar di leaf
    Registrato dal
    Oct 2012
    Messaggi
    316
    a-ha! non mi era neanche passato di mente di utilizzare 2 nth-child in fila..perfetto grazie

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.