3.1 Pseudoclasse :first-child
Le pseudoclassi di struttura in CSS permettono di selezionare e stilizzare elementi basandosi sulla loro posizione nell'albero del documento. È particolarmente utile per creare stili più precisi e dettagliati, applicati a elementi specifici. Diamo un'occhiata alle pseudoclassi :first-child, :last-child, :nth-child e :nth-of-type.
La pseudoclasse :first-child seleziona il primo elemento figlio del suo genitore. È utile per stilizzare il primo elemento in un gruppo di elementi simili, come liste o paragrafi.
Sintassi:
selettore:first-child {
proprietà: valori;
}
Esempio di utilizzo
In questo esempio il primo elemento della lista è evidenziato in grassetto e rosso, mentre il primo paragrafo all'interno di un div è trasformato in maiuscolo:
/* Stilizzazione del primo elemento della lista */
li:first-child {
font-weight: bold;
color: red;
}
/* Stilizzazione del primo paragrafo nel div */
div p:first-child {
text-transform: uppercase;
}
3.2 Pseudoclasse :last-child
La pseudoclasse :last-child seleziona l'ultimo elemento figlio del suo genitore. È usata per stilizzare l'ultimo elemento in un gruppo di elementi simili.
Sintassi:
selettore:last-child {
proprietà: valori;
}
Esempio di utilizzo
In questo esempio l'ultimo elemento della lista è evidenziato in corsivo e blu, mentre l'ultimo paragrafo all'interno di un div è sottolineato:
/* Stilizzazione dell'ultimo elemento della lista */
li:last-child {
font-style: italic;
color: blue;
}
/* Stilizzazione dell'ultimo paragrafo nel div */
div p:last-child {
text-decoration: underline;
}
3.3 Pseudoclasse :nth-child
La pseudoclasse :nth-child consente di selezionare elementi in base alla loro posizione in un gruppo. Accetta un argomento, che determina quali elementi verranno selezionati. L'argomento può essere un numero, una parola chiave o un'espressione.
Sintassi:
selettorenth-child(argomento) {
proprietà: valori;
}
Argomenti:
- Numero: seleziona l'elemento alla posizione specificata
- Parole chiave:
odd(dispari) eeven(pari) - Espressione: formato
an+b, doveaebsono numeri
Esempio 1: Selezione degli elementi dispari
In questo esempio tutti gli elementi dispari della lista vengono stilizzati con uno sfondo grigio chiaro:
/* Stilizzazione degli elementi dispari della lista */
li:nth-child(odd) {
background-color: #f0f0f0;
}
Esempio 2: Selezione degli elementi a una posizione specifica
In questo esempio il terzo elemento della lista è evidenziato in grassetto e verde:
/* Stilizzazione del terzo elemento della lista */
li:nth-child(3) {
font-weight: bold;
color: green;
}
Esempio 3: Utilizzo di espressioni
In questo esempio ogni secondo elemento, a partire dal primo, viene stilizzato con uno sfondo grigio chiaro:
/* Stilizzazione di ogni secondo elemento, a partire dal primo */
li:nth-child(2n+1) {
background-color: #e0e0e0;
}
3.4 Pseudoclasse :nth-of-type
La pseudoclasse :nth-of-type è simile a :nth-child, ma seleziona elementi in base al loro tipo tra i figli del genitore comune. Questo permette di selezionare tipi specifici di elementi, anche se non sono i primi figli del loro genitore.
Sintassi:
selettore:nth-of-type(argomento) {
proprietà: valori;
}
Argomenti:
- Numero: seleziona l'elemento alla posizione specificata tra gli elementi dello stesso tipo
- Parole chiave:
odd(dispari) eeven(pari) - Espressione: formato
an+b, doveaebsono numeri
Esempio 1: Selezione dei paragrafi pari
In questo esempio tutti i paragrafi pari vengono stilizzati con uno sfondo grigio chiaro:
/* Stilizzazione dei paragrafi pari */
p:nth-of-type(even) {
background-color: #d0d0d0;
}
Esempio 2: Selezione degli elementi a una posizione specifica tra un tipo
In questo esempio il secondo titolo h2 viene ingrandito e colorato di arancione:
/* Stilizzazione del secondo titolo h2 */
h2:nth-of-type(2) {
font-size: 2em;
color: orange;
}
Esempio 3: Utilizzo di espressioni
In questo esempio ogni terzo elemento della lista, a partire dal secondo, viene stilizzato con uno sfondo grigio chiaro:
/* Stilizzazione di ogni terzo elemento della lista, a partire dal secondo */
li:nth-of-type(3n+2) {
background-color: #c0c0c0;
}
GO TO FULL VERSION