Corso HTML e CSS (Lezione 15): I selettori CSS (Parte 3^)

Impariamo a costruire un sito Web

Lezione 15: CSS: Pseudo-classi e pseudo-elementi

 

Le pseudo-classi sono usate per aggiungere effetti ad alcuni selettori.

La sintassi è: selettore:pseudo-classe {proprietà:valore;}

oppure

selettore.classe:pseudo-classe {proprietà:valore;}

in quanto anche le classi CSS possono essere usate insieme ad una pseudo-classe.

Vediamole ora in dettaglio analizzandole suddivise per categoria:

a)  Pseudo-classi per i links 

:link Indica tutti i links non visitati
:visited Indica i links visitati
:hover Indica il link col puntatore del mouse sopra
:active Indica il link corrente (es. la pagina del menu attiva)

Quando vengono indicati in un CSS devono essere scritti rigorosamente nell’ordine sopra indicato perché siano efficaci.

Esempio:

   a:link {color:#004080;}

   a:visited {color:#8080C0;}

   a:hover {color:#FF00FF;}

   a:active {color:#000000;}

Queste dichiarazioni saranno applicabili ai link. Es:

<a href=”http://www.stintino.net”>Stintino</a>

I colori verranno applicati di conseguenza.

b) Pseudo-classe  :focus 

Viene utilizzata per attribuire uno stile ad un elemento di input quando ottiene il focus (diventa l’elemento attivo).

Vediamo un esempio:

Nel CSS scriviamo

input:focus {

   background-color:orange;

}

e nel body del documento html:

<form>

   First name: <input type="text" name="firstname" /><br />
   Last name: <input type="text" name="lastname" />

</form>

Il risultato sarà che il campo di input attivo avrà lo sfondo arancione.

c) Pseudo-classe  :lang 

Questa pseudo-classe viene usata per definire regole diverse per linguaggi diversi.

Ad esempio se nel CSS scriviamo:

div:lang(zh) {

   display:block;
   width:250px;
   border:1px solid #333;

}

e nella pagina html:

<div lang=”zh”>Questo è un box</div>

il risultato sarà:

Questo è un box

 

d)  Pseudo-classi strutturali 

Le pseudo-classi strutturali consentono di assegnare uno stile agli elementi della pagina html in base ad informazioni e particolarità non altrimenti selezionabili.

Rientrano in questa casistica le seguenti pseudo-classi:

:root Seleziona l’elemento radice della pagina. Corrisponde all’elemento <html>
:empty Seleziona ogni elemento che non contenga figli
:first-child Seleziona l’elemento che sia il primo figlio del suo elemento padre
:last-child Seleziona l’ultimo figlio del suo elemento padre
:only-child Seleziona l’elemento che sia l’unico figlio del suo elemento padre
:nth-child(n) Seleziona l’n-esimo elemento figlio del suo elemento padre
:nth-last-child(n) Seleziona l’n-esimo elemento figlio del suo elemento padre partendo dall’ultimo fratello
:first-of-type Seleziona il primo elemento dello stesso tipo figlio del suo elemento padre
:last-of-type Seleziona l’ultimo elemento dello stesso tipo figlio del suo elemento padre
:only-of-type Seleziona l’elemento del tipo indicato che sia l’unico figlio del suo elemento padre
:nth-of-type(n) Seleziona l’n-esimo elemento dello stesso tipo figlio del suo elemento padre
:nth-last-of-type(n) Seleziona l’n-esimo elemento dello stesso tipo figlio del suo elemento padre partendo dall’ultimo fratello

A parte :first-child sono stati tutti introdotti con i CSS3. Sono particolarmente potenti e poiché le definizioni astratte, come spesso succede, possono essere alquanto oscure, vale la pena di vederli in dettaglio singolarmente con esempi esplicativi.

 :root 

Identifica l’elemento radice che in una pagina html è sempre html stesso. Significa che scrivere:

   html {background-color: red; color: yellow}

oppure

   :root {background-color: red; color: yellow}

è la stessa cosa.

 :empty 

Utilizzato per assegnare uno stile agli elementi html che non contengono figli. Anche con del semplice testo un elemento viene considerato non vuoto e quindi lo stile non verrà applicato. Vediamo un esempio. Nel CSS scriviamo:

p:empty {

   width:30px;
   height:30px;
   border: 1px solid #000;
   background:cyan;

}

e in una pagina html:

<p></p>
<p>questo è un po' di testo</p>

Il risultato sarà:

questo è un po’ di testo

 :first-child 

Seleziona l’elemento che sia il primo figlio del suo elemento padre. In questo caso il significato è piuttosto chiaro. Se ad esempio nel CSS scriviamo:

p:first-child {

   background-color:yellow;

}

verranno evidenziati in giallo solo i paragrafi <p> che siano i primi figli del proprio padre; per esempio verrà selezionato il primo <p> in assoluto e, se all’interno di una <div> ci fossero tre paragrafi verrebbe evidenziato solo il primo.

 :last-child 

Seleziona l’elemento che sia l’ultimo figlio del suo elemento padre. Anche in questo caso il significato è piuttosto chiaro. Nell’esempio:

p:last-child {

   background-color:yellow;

}

verranno evidenziati in giallo solo i paragrafi <p> che siano gli ultimi figli del proprio padre; per esempio verrà selezionatol’ultimo <p> in assoluto e, se all’interno di una <div> ci fossero tre paragrafi verrebbe evidenziato solo il terzo.

Occorre precisare che Microsoft IE sino alla versione 8 compresa non supporta questa pseudo-classe.

 :only-child 

In questo caso si intende dare uno stile ai soli elementi senza fratelli. Se nel CSS scriviamo:

p:only-child {

   background-color:yellow;

}

e nel documento html scriviamo:

<div>
   <p>1° paragrafo</p>
</div>

<div>
   <p>2° paragrafo</p>
   <p>3° paragrafo</p>
</div>

verrà evidenziato in giallo solo il 1° paragrafo in quanto unico figlio della prima <div>, mentre nella seconda ci sono due figli.

Microsoft IE sino alla versione 8 compresa non supporta questa pseudo-classe.

 :nth-child() 

nth-child(n) identifica l’elemento che è l’n-esimo figlio del suo
elemento padre. Può essere usato in diversi modi e vale la pena di esaminarne la potenzialità con un esempio un po’ articolato.

Supponiamo di avere una tabella come la seguente:

<table>

   <tr><th>Cognome</th><th>Nome</th><th>Eta</th></tr>
   <tr><td>Smith</td><td>John</td><td>50</td></tr>
   <tr><td>Green</td><td>Ed</td><td>43</td></tr>
   <tr><td>White</td><td>Lucy</td><td>37</td></tr>
   <tr><td>Brown</td><td>Mary</td><td>20</td></tr>
   <tr><td>Carrol</td><td>Mike</td><td>49</td></tr>

</table>

Con una dichiarazione nel CSS del tipo:

   tr:nth-child(4) td {background-color: #F2F2F2}

potremo colorare la 4^ riga con il grigio chiaro. Per 4? riga si intende quella di Lucy White in quanto viene contata anche la testata.

Invece con una dichiarazione del tipo:

   tr:nth-child(odd) td {background-color: #F2F2F2}

assegnamo quel colore di sfondo a tutte le righe dispari. Per far questo si può usare la parola chiave ‘odd’, mentre con ‘even’ si potrebbero indicare le righe pari. Lo stesso risultato lo si potrebbe ottenere poi in un altro modo, sfruttando la possibilità di individuare le righe da colorare con una formula e precisamente:

   tr:nth-child(2n+1) td {background-color: #F2F2F2}

La formula 2n+1 indica appunto le righe dispari (con n=0 si ottiene 1, con n=1 si ottiene 3 ecc.). La formula è sempre del tipo an+b con ‘a‘ e ‘b‘ costanti, mentre n rappresenta un ciclo che inizia da 0. Con la formula n+2 come ultimo esempio si potrebbero colorare tutte le righe della tabella con esclusione della testata.

Microsoft IE sino alla versione 8 compresa non supporta questa pseudo-classe.

 :nth-last-child() 

Questa dichiarazione è identica alla precedente salvo che si inizia a contare dall’ultimo elemento a ritroso.

Microsoft IE sino alla versione 8 compresa non supporta questa pseudo-classe.

 :first-of-type 

Questa pseudo-classe va usata per assegnare uno stile al primo elemento di un certo tipo figlio dello stesso padre. Per esempio se scriviamo:

   p:first-of-type {background-color: yellow}

e nella pagina html:

<div>
   <p>1° paragrafo</p>
</div>

<div>
   <p>2° paragrafo</p>
   <p>3° paragrafo</p>
</div>

significa che vogliamo colorare in giallo il 1° paragrafo ed il 2° paragrafo che sono i primi figli del loro rispettivo padre.

Naturalmente, come in ogni altro caso l’elemento può essere un elemento discendente e possiamo scrivere per esempio:

   div p:first-of-type {background-color: yellow}

per intendere che i paragrafi da prendere in considerazione sono i primi figli di una <div>.

Microsoft IE sino alla versione 8 compresa non supporta questa pseudo-classe.

 :last-of-type 

Esattamente come sopra, salvo che vengono presi in considerazione gli ultimi elementi del tipo indicato figli dello stesso padre, anziché i primi.

Anche questa pseudo-classe non è supportata da Microsoft IE sino alla versione 8.

 :only-of-type 

In questo caso si intende dare uno stile ai soli elementi del tipo indicato, senza fratelli. Se nel CSS scriviamo:

p:only-of type {

   background-color:yellow;

}

e nel documento html scriviamo:

<div>
   <p>1° paragrafo</p>
</div>

<div>
   <p>2° paragrafo</p>
   <p>3° paragrafo</p>
</div>

verrà evidenziato in giallo solo il 1° paragrafo in quanto unico paragrafo senza fratelli dello stesso tipo. Per chiarire meglio la differenza di :only-of type rispetto a :only-child pensiamo che se nella prima <div> ci fosse anche un paragrafo <a>, per esempio, in questo caso il paragrafo verrebbe selezionato per avere lo sfondo giallo in quanto comunque unico figlio di tipo p mentre usando :only-child non verrebbe selezionato in quanto non sarebbe l’unico figlio.

Anche questa pseudo-classe non è supportata da Microsoft IE sino alla versione 8.

 :nth-of-type() 

Per descrivere il funzionamento di questa pseudo-classe ci possiamo rifare a quanto detto per :nth-child() sostituendo ad ‘n-esimo figlio‘ ‘n-esimo figlio del tipo indicato‘. Per il resto il funzionamente è lo stesso, anche per quanto riguarda le formule che possono essere usate.

Anche questa pseudo-classe non è supportata da Microsoft IE sino alla versione 8.

 :nth-last-of-type() 

Questa dichiarazione è identica alla precedente salvo che si inizia a contare dall’ultimo elemento a ritroso.

Microsoft IE sino alla versione 8 compresa non supporta questa pseudo-classe.

Come conclusione dell’illustrazione delle pseudo-classi dobbiamo dire che la mancata compatibilità di IE8 e precedenti con tutte tranne :first-child ne limita l’usabilità. Tenere sempre presente questa limitazione perché la diffusione di IE in versioni precedenti alla 9 è ancora di circa il 30%.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.