Sfida: Pratica con le Pseudo-Classi Strutturali
Compito
Stiamo lavorando con un insieme di elementi e l'obiettivo è esercitarsi nell'applicazione di diversi colori utilizzando le pseudo-classi strutturali. Il tuo compito è il seguente:
- Applicare il colore
redal primo elemento utilizzando una pseudo-classe strutturale. - Applicare il colore
blueall'ultimo elemento utilizzando una pseudo-classe strutturale. - Applicare il colore
greena ogni secondo elemento utilizzando una pseudo-classe strutturale.
index.html
index.css
:first-child: Seleziona il primo figlio di un elemento genitore.:last-child: Seleziona l'ultimo figlio di un elemento genitore.:nth-child(): Seleziona un figlio specifico di un elemento genitore in base alla sua posizione nell'elenco. Ad esempio, per selezionare ogni secondo elemento della lista (2, 4, 6, ecc.), puoi usare:nth-child(2n).
index.html
index.css
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 3. Capitolo 6
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.56
Sfida: Pratica con le Pseudo-Classi Strutturali
Scorri per mostrare il menu
Compito
Stiamo lavorando con un insieme di elementi e l'obiettivo è esercitarsi nell'applicazione di diversi colori utilizzando le pseudo-classi strutturali. Il tuo compito è il seguente:
- Applicare il colore
redal primo elemento utilizzando una pseudo-classe strutturale. - Applicare il colore
blueall'ultimo elemento utilizzando una pseudo-classe strutturale. - Applicare il colore
greena ogni secondo elemento utilizzando una pseudo-classe strutturale.
index.html
index.css
:first-child: Seleziona il primo figlio di un elemento genitore.:last-child: Seleziona l'ultimo figlio di un elemento genitore.:nth-child(): Seleziona un figlio specifico di un elemento genitore in base alla sua posizione nell'elenco. Ad esempio, per selezionare ogni secondo elemento della lista (2, 4, 6, ecc.), puoi usare:nth-child(2n).
index.html
index.css
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 3. Capitolo 6