:nth-child e :nth-of-type
Selezioni gli elementi in base alla posizione nel genitore usando formule nth e selettori di tipo.
:nth-child e :nth-of-type è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cosa sono le pseudo-classi strutturali?
Le pseudo-classi strutturali selezionano gli elementi in base alla loro posizione all'interno del genitore. Eliminano la necessità di aggiungere classi o JavaScript per selezionare specifici elementi figli.
:first-child e :last-child
Selezioni il primo o l'ultimo figlio di un elemento genitore:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
Nozioni di base su :nth-child()
:nth-child(n) seleziona gli elementi in base alla loro posizione (indicizzata a partire da 1) tra i fratelli di qualsiasi tipo.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() con le parole chiave
Utilizzi la parola chiave odd o even per applicare stili alternati alle righe:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() con le formule
Utilizzi la formula An+B, dove A indica il passo e B l'offset. n inizia da 0 e aumenta progressivamente.
3n— ogni terzo elemento (3, 6, 9...)3n+1— il primo elemento di ogni gruppo di tre (1, 4, 7...)-n+3— solo i primi tre elementi
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() conta solo i fratelli dello stesso tipo di elemento, ignorando gli altri. Questo è importante quando i tipi di elemento sono misti.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type e :last-of-type
Selezioni il primo o l'ultimo elemento di uno specifico tipo di tag tra gli elementi fratelli:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child vs :nth-of-type
Differenza fondamentale:
p:nth-child(2)— seleziona il secondo figlio SE è un<p>p:nth-of-type(2)— seleziona il secondo<p>indipendentemente dagli altri elementi
:only-child e :only-of-type
:only-child seleziona un elemento che è l'unico figlio del suo genitore. :only-of-type seleziona un elemento che è l'unico del suo tipo all'interno del genitore.
<div><p>I'm the only child in this div.</p></div>
:nth-child con il selettore of S (moderno)
Il CSS moderno consente di filtrare gli elementi conteggiati dalla formula nth utilizzando :nth-child(An+B of selector):
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Esempio pratico: spazio dell'ultima riga della griglia
Rimuova il margine inferiore dall'ultimo elemento visibile:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Verifica rapida
Quale selettore seleziona ogni terzo elemento di un elenco a partire dal primo?
Riepilogo
:nth-child() conta tutti gli elementi fratelli in base alla posizione; :nth-of-type() conta solo gli elementi fratelli dello stesso tag. Utilizzi odd/even per creare tabelle a righe alternate. La formula An+B consente di creare schemi efficaci, come "ogni terzo elemento" o "i primi cinque", senza aggiungere classi.
Domande Frequenti
La lezione «:nth-child e :nth-of-type» è gratuita?
Sì — il testo completo di «:nth-child e :nth-of-type» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «:nth-child e :nth-of-type»?
Selezioni gli elementi in base alla posizione nel genitore usando formule nth e selettori di tipo. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «:nth-child e :nth-of-type»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- :hover :focus :active e :visited
- :nth-child e :nth-of-type
- :not() :is() e :where()
- :checked :disabled e pseudo-classi dello stato dei form