Impara Utilizzo delle Pseudo-Classi Strutturali e Funzionali | Il Modello a Scatola CSS e Gli Elementi di Spaziatura

Le pseudo-classi consentono di selezionare con precisione gli elementi in base al loro ordine all'interno di un contenitore. Esaminiamo alcune delle più comunemente utilizzate.

:first-child

La pseudo-classe :first-child seleziona un elemento che è il primo figlio del suo genitore, indipendentemente dal tag o dal nome della classe. Consideriamo il seguente esempio per chiarire. Abbiamo un insieme di elementi e, solo per il primo elemento (il primo elemento <li>), vogliamo impostare la proprietà color su blue.

index.html

styles.css

Output

Solo il primo elemento FAQ è stato selezionato e sono stati applicati stili specifici.

:last-child

La pseudo-classe :last-child seleziona l'ultimo figlio del suo genitore, consentendo di modificarne qualsiasi proprietà. Consideriamo un esempio per illustrare come utilizzare efficacemente questa pseudo-classe.

index.html

styles.css

Output

:nth-child

La pseudo-classe :nth-child consente di selezionare gli elementi in base alla loro posizione all'interno di un elenco di elementi fratelli. È possibile iniziare con una selezione semplice specificando un numero. Ad esempio:

index.html

styles.css

Output

Gli stili di accento sono stati applicati solo agli elementi selezionati (2° e 3°).

Avanzato :nth-child

Per scenari più complessi, è possibile utilizzare la formula an+b per selezionare più elementi in base alla loro posizione. Ecco come funziona la formula:

a determina il pattern di ripetizione (ad esempio, ogni 2°, 3° elemento, ecc.);
b imposta il punto di partenza o l'offset per la selezione;
n agisce come contatore che si incrementa a ogni iterazione, partendo da 0.

Consideriamo alcuni selettori tipici.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Nota

Non è necessario ricordare tutti i selettori. È sempre possibile cercarli su Google.

:not()

La pseudo-classe :not() seleziona gli elementi che non corrispondono a un selettore specificato. Ad esempio, :not(p) selezionerebbe tutti gli elementi tranne gli elementi <p>. Vediamo alcuni esempi:

index.html

index.css

1. Quale pseudo-classe può essere utilizzata per selezionare il primo elemento in un insieme di elementi?

2. A cosa serve la pseudo-classe `nth-child`?

3. Come funziona la pseudo-classe `last-child`?

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 5

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain how the :not() pseudo-class works with multiple selectors?

Could you provide more examples of using :not() in CSS?

What are some common use cases for the :not() pseudo-class?

Awesome!

Completion rate improved to 2.56

Scorri per mostrare il menu

Le pseudo-classi consentono di selezionare con precisione gli elementi in base al loro ordine all'interno di un contenitore. Esaminiamo alcune delle più comunemente utilizzate.

:first-child

index.html

styles.css

Output

Solo il primo elemento FAQ è stato selezionato e sono stati applicati stili specifici.

:last-child

index.html

styles.css

Output

:nth-child

index.html

styles.css

Output

Gli stili di accento sono stati applicati solo agli elementi selezionati (2° e 3°).

Avanzato :nth-child

Per scenari più complessi, è possibile utilizzare la formula an+b per selezionare più elementi in base alla loro posizione. Ecco come funziona la formula:

a determina il pattern di ripetizione (ad esempio, ogni 2°, 3° elemento, ecc.);
b imposta il punto di partenza o l'offset per la selezione;
n agisce come contatore che si incrementa a ogni iterazione, partendo da 0.

Consideriamo alcuni selettori tipici.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Nota

Non è necessario ricordare tutti i selettori. È sempre possibile cercarli su Google.

:not()

index.html

index.css

1. Quale pseudo-classe può essere utilizzata per selezionare il primo elemento in un insieme di elementi?

2. A cosa serve la pseudo-classe `nth-child`?

3. Come funziona la pseudo-classe `last-child`?

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 5

Utilizzo delle Pseudo-Classi Strutturali e Funzionali

:first-child

Output

:last-child

Output

:nth-child

Output

Avanzato :nth-child

:not()

1. Quale pseudo-classe può essere utilizzata per selezionare il primo elemento in un insieme di elementi?

2. A cosa serve la pseudo-classe nth-child?

3. Come funziona la pseudo-classe last-child?

Awesome!

Utilizzo delle Pseudo-Classi Strutturali e Funzionali

:first-child

Output

:last-child

Output

:nth-child

Output

Avanzato :nth-child

:not()

1. Quale pseudo-classe può essere utilizzata per selezionare il primo elemento in un insieme di elementi?

2. A cosa serve la pseudo-classe nth-child?

3. Come funziona la pseudo-classe last-child?

2. A cosa serve la pseudo-classe `nth-child`?

3. Come funziona la pseudo-classe `last-child`?

2. A cosa serve la pseudo-classe `nth-child`?

3. Come funziona la pseudo-classe `last-child`?