Riferimenti: https://www.html.it/pag/19441/selettori-di-base/

SELETTORI DI BASE

Selettore universale

Il selettore universale è definito sintatticamente da un asterisco: *. La sua funzione è quella di selezionare tutti gli elementi presenti in un documento.
L'esempio sottostante assegna il colore rosso al testo di un qualsiasi elemento contenuto nell'albero del documento (DOM)

* {color: red;}

Selettore di tipo

I selettori di tipo sono rappresentati dal nome di uno specifico tag HTML. Servono a selezionare tutti gli elementi di quel tipo specifico presenti in un documento.

Si utilizza questa sintassi:

.nomeTag { dichiarazioni CSS }

L'esempio sottostante assegna il colore rosso al testo di un qualsiasi elemento <h1>.

h1 {color: red;}

Selettore di classe

I selettori di classe servono per selezionare gli elementi a cui sia stata assegnata una determinata classe. Si utilizza questa sintassi:

.nomeClasse { dichiarazioni CSS }

Si noti che il nome della classe viene fatto precedere da un punto (.). La regola sottostante imposta il colore rosso per tutti gli elementi con classe titolo

.titolo {color: red;}

Si ricorda che è possibile assegnare ad un elemento più classi. È sufficiente definirle nella direttiva class separandole con uno spazio:

<h1 class="testo commento titolo">testo</h1>

È anche possibile definire una regola che vada a limitare l'azione dei selettori di classe a solo determinati tipi di tag HTML. In pratica, se assegniamo la stessa classe a più tag HTML differenti, possiamo creare una regola che agisca solo su certi tipi di elementi e non su altri. La sintassi è la seguente:

nomeTag.nomeClasse { dichiarazioni CSS }

Nell'esempio successivo coloreremo il testo di rosso solo dei tag <h1> la cui classe è uguale a titolo.

h1.titolo {color: red;}

Rimane da valutare un terzo scenario, quello delle classi multiple. Nell'esempio successivo

<STYLE>
.titolo.maiuscolo {color: red}
</STYLE>
<div class="titolo">Testo A resta NERO</div>
<div class="maiuscolo">Testo B resta NERO</div>
<div class="titolo importante maiuscolo">Testo C diventa ROSSO</div>
<div class="maiuscolo importante titolo">Testo D diventa ROSSO</div>

coloreremo il testo di rosso solo degli ultimi 2 elementi <div> dove sono presenti (in qualunque ordine) tutti i nomi delle classi definite nel selettore (titolo e maiuscolo).

Selettore di ID

Anche l' Id è un attributo universale in HTML. Significa che tutti gli elementi presenti nel documento possono avere un loro Id. A differenza delle classi, però, uno specifico Id può essere assegnato solo ad un elemento. Non possiamo quindi avere in un documento HTML più elementi con lo stesso Id. Nei CSS, per selezionare un elemento a cui sia stato assegnato un certo Id, si usa questa sintassi, facendo precedere il valore dell'Id dal simbolo del cancelletto (#):

#nomeId { dichiarazioni CSS }

E' possibile includere anche il tag con la seguente sintassi:

nomeTag#NomeId { dichiarazioni CSS }

Nell'esempio successivo coloreremo il testo di rosso solo dei tag <h1> il cui Id è uguale a titolo.

h1#titolo { color: red }

SELETTORI COMBINATORI O DI RELAZIONE

Una categoria fondamentale di selettori CSS è rappresentata dai cosiddetti selettori combinatori (detti anche selettori di relazione). Hanno la funzione di mettere in relazione elementi presenti all'interno dell'albero del documento. Sono quattro:

Analizziamoli nel dettaglio.

Selettore di discendenti

Il selettore di discendenti è sicuramente quello più utilizzato dei quattro. Non è presente solo nella specifica CSS3 ma anche nelle precedenti versioni ed è utilissimo per evitare l'abuso delle classi per assegnare stili agli elementi. Il combinatore seleziona un elemento che è discendente di un altro elemento. Analizziamo l'esempio successivo:

div#container p {color: red}

Il codice appena visto serve ad assegnare lo stile solo ai paragrafi <p> contenuti nel tag <div> con id=container. Nell'esempio successivo, solo il 1° e il 3° paragrafo rispettano questa situazione, per cui presentano un testo in rosso.

<STYLE>
div#container p {color: red}
</STYLE>

<div id="container"><p>Testo A diventa ROSSO</p></div>
<div id="main"><p>Testo B resta nero</p></div>
<div id="container"><span><p>Testo C diventa ROSSO</p></span></div>

Per impostare la relazione di discendenza, è sufficiente separare l'elemento antenato dal discendente con uno spazio.

Selettore di figli

Il selettore di figli (>) consente di selezionare un elemento che è figlio diretto dell'elemento padre. Questo selettore è solo in apparenza simile al selettore di discendenza. La differenza sta nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. Chiariamolo con questo esempio

<STYLE>
div#container > p {color: red}
</STYLE>

<div id="container"><p>Testo A diventa ROSSO</p></div>
<div id="main"><p>Testo B resta NERO</p></div>
<div id="container"><span><p>Testo C resta NERO</p></span></div>

Nell'esempio sovrastante, solo il primo paragrafo rispetta questa situazione, per cui sarà l'unico a presentare il testo in rosso.

Selettore di fratelli adiacenti

Il selettore di fratelli adiacenti serve a scorrere in orizzontale l'albero del DOM assegnando le regole CSS agli elementi che si trovano allo stesso livello di un altro elemento. La relazione si definisce collegando i due elementi con il segno +.

In pratica, questo tipo di selettore consente di assegnare uno stile all'elemento fratello immediatamente adiacente. Dato un codice HTML come il seguente:

<STYLE>
h1+h2 {color: red}
</STYLE>
<div>
   <h1>Titolo A.1 resta NERO</h1>
   <h2>Paragrafo A.1a diventa ROSSO</h2>
   <h2>Paragrafo A.1b resta NERO</h2>
   <div>
      <h1>Titolo A.2 resta NERO</h1>
      <h2>Paragrafo A.2a diventa ROSSO</h2>
      <h2>Paragrafo A.2b resta NERO</h2>
   </div>
</div>

Nell'esempio sovrastante, solo i tag <h2> immediatamente successivi a <h1> presenteranno il testo colorato di rosso.  Consideriamo, invece, il seguente codice HTML

<STYLE>
li + li +li {color: red}
</STYLE>
<ul>
<li>List Item 1 resta NERO</li>
<li>List Item 2 resta NERO</li>
<li>List Item 3 Testo ROSSO</li>
<li>List Item 4 Testo ROSSO</li>
<li>List Item 5 Testo ROSSO</li>
</ul>

Il combinatore andrà a selezionare tutti quegli elementi che sono diretti fratelli di una coppia di tag <li> consecutivi e, scorrendo in verticale l'albero del DOM, solo il primo e il secondo <li> non coincideranno con la proprietà selezionata.

Selettore generale di fratelli

L'ultimo combinatore (~) è una generalizzazione di quello visto in precedenza. Esso assegna uno stile a tutti gli elementi che sono fratelli. Dato il codice HTML simile a quello visto in precedenza con la tilde andremo a selezionare tutti gli elementi <h2> che si trovano allo stesso livello di <h1>.

<STYLE>
h1 ~ h2 {color: red}
</STYLE>
<div>
   <h1>Titolo A.1 resta NERO</h1>
   <h2>Paragrafo A.1a diventa ROSSO</h2>
   <h2>Paragrafo A.1b diventa ROSSO</h2>
   <div>
      <h1>Titolo A.2 resta NERO</h1>
      <h2>Paragrafo A.2a diventa ROSSO</h2>
      <h2>Paragrafo A.2b diventa ROSSO</h2>
   </div>
</div>

SELETTORI DI ATTRIBUTO

I selettori di attributo servono a selezionare gli elementi in base ai loro attributi e/o al loro valore.
La specifica CSS 2.1 prevede 4 tipi. Altri 3 tipi sono stati invece definiti nei CSS3.

Selezione in base alla presenza di un attributo (CSS 2.1)

Con questo tipo di selettore di attributo si selezionano tutti gli elementi che presentano nel codice HTML un determinato attributo, a prescindere dal valore dell'attributo stesso. La sintassi per questa tipologia è la seguente:

elemento[attributo] { dichiarazioni CSS }

Il nome dell'attributo va posto tra parentesi quadre, senza racchiuderlo tra virgolette. Tra il nome dell'elemento e la definizione dell'attributo non va lasciato spazio.
Il seguente esempio:

a[title] {color: white; text-decoration: underline;}

 assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che presentino un attributo title.

Selezione con valore corrispondente (CSS 2.1)

Questo tipo di selettore individua tutti gli elementi che abbiano come valore dell'attributo specificato la stringa di testo impostata nella regola CSS.  La sintassi per questa tipologia è la seguente:

elemento[attributo="valore"] { dichiarazioni CSS }

La stringa corrispondente al valore va messa tra virgolette se è composta da più di una parola. Il confronto effettuato è case sensitive.
Il seguente esempio:

a[title="lorem ipsum"] {color: white; text-decoration: underline;}

 assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che presentino un attributo title valorizzato esattamente con "lorem ipsum".

Selezione in base a valori di una lista di parole separate dallo spazio che contengono esattamente una stringa (CSS 2.1)

Questo tipo di selettore seleziona tutti gli elementi dove l'attributo, contenente una lista di parole separate da spazi, abbia almeno una voce che corrisponde esattamente al valore definito nella regola CSS.  La sintassi per questa tipologia è la seguente:

elemento[attributo~="valore"] { dichiarazioni CSS }

La differenza principale con il precedente selettore è che il segno = va preceduto dalla tilde (~). Il confronto effettuato è case sensitive.
Il seguente esempio:

a[title~="lorem"] {color: white; text-decoration: underline;}

assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che contengono nell'attributo title una lista di parole separate da spazi  dove una parola corrisponde esattamente alla stringa lorem. Vediamo questo esempio per comprenderne esattamente il suo funzionamento:

<STYLE>
h1[title~="lorenzo"] { color: red }
</STYLE>
<h1 title="lorenzo">Testo A in ROSSO</h1>
<h1 title="lorenzotto">Testo B (non è esattamente uguale a "lorenzo")</h1>
<h1 title="Lorenzo">Testo C (il confronto case sensitive!)</h1>
<h1 title="lorenzo caio">Testo D in ROSSO</h1>
<h1 title="lorenzotto caio">Testo E (la lista non contiene esattamente "lorenzo")</h1>
<h1 title="caio lorenzo">Testo F in ROSSO</h1>
<h1 title="lorenzo-caio">Testo G (l'elenco non usa lo spazio come separatore)</h1>

Selezione in base a valori, separati dal trattino, che iniziano esattamente con una certa parola (CSS 2.1)

Si tratta di un selettore pochissimo utilizzato e di scarsa utilità. Individua tutti gli elementi in cui uno specifico attributo che contiene una lista di parole separate da trattini, inizia esattamente con la parola corrispondente al valore definito nella regola CSS. Il confronto è case sensitive. E' poco usato. La sintassi per questa tipologia è la seguente:

elemento[attributo|="valore"] { dichiarazioni CSS }

Il seguente esempio:

a[title|="lorem"] {color: white; text-decoration: underline;}

assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che contengono nell'attributo title una lista di parole separate da trattini dove la prima parola è esattamente lorem. Vediamo questo esempio per comprenderne esattamente il suo funzionamento

<STYLE>
h1[title|="lorenzo"] { color: red }
</STYLE>
<h1 title="lorenzo">Testo A in ROSSO</h1>
<h1 title="lorenzotto">Testo B (non è esattamente uguale a "lorenzo")</h1>
<h1 title="Lorenzo">Testo C (il confronto case sensitive)</h1>
<h1 title="lorenzo-caio">Testo D in ROSSO</h1>
<h1 title="lorenzotto-caio">Testo E (non inizia esattamente con "lorenzo")</h1>
<h1 title="caio-lorenzo">Testo F ("lorenzo" non è all'inizio della lista)</h1>
<h1 title="lorenzo caio">Testo G (l'elenco non usa il trattino come separatore)</h1>

Selezione in base a valori che iniziano con una certa stringa (CSS 3.0)

Si tratta di un selettore che individua tutti gli elementi in cui uno specifico attributo inizia esattamente per un determinato valore definito nella regola CSS.  La sintassi per questa tipologia è la seguente:

elemento[attributo^="valore"] { dichiarazioni CSS }

Il confronto effettuato è case sensitive. Il seguente esempio:

a[title^="lorem"] {color: white; text-decoration: underline;}

assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che contengono nell'attributo title una stringa che inizia per lorem.Vediamo ora un esempio più completo per comprenderne esattamente il suo funzionamento

<STYLE>
h1[title^="lorenzo"] { color: red }
</STYLE>
<h1 title="lorenzo">Testo A in ROSSO</h1>
<h1 title="lorenzotto">Testo B in ROSSO</h1>
<h1 title="Lorenzo">Testo C (il confronto case sensitive)</h1>
<h1 title="lorenzo caio">Testo D in ROSSO</h1>
<h1 title="lorenzotto caio">Testo E in ROSSO</h1>
<h1 title="caio lorenzo">Testo F (non inizia con "lorenzo")</h1>
<h1 title="lorenzo-caio">Testo G in ROSSO</h1>

Selezione in base a valori che finiscono con una certa stringa (CSS 3.0)

Il selettore è del tutto identico a quello precedente con un'unica differenza fondamentale: il valore deve trovarsi al termine dell'attributo.  La sintassi per questa tipologia è la seguente:

elemento[attributo$="valore"] { dichiarazioni CSS }

Il confronto effettuato è case sensitive. Il seguente esempio:

a[title$="lorem"] {color: white; text-decoration: underline;}

assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che contengono nell'attributo title una stringa che finisce per lorem. Vediamo questo esempio per comprenderne esattamente il suo funzionamento:

<STYLE>
h1[title$="lorenzo"] { color: red }
</STYLE>
<h1 title="lorenzo">Testo A in rosso</h1>
<h1 title="lorenzotto">Testo B (non termina con "lorenzo")</h1>
<h1 title="Lorenzo">Testo C (il confronto case sensitive)</h1>
<h1 title="lorenzo caio">Testo D (non termina per "lorenzo")</h1>
<h1 title="caio calorenzo">Testo F in rosso</h1>
<h1 title="caio-lorenzo">Testo G in rosso</h1>

Selezione in base a valori che contengono con una certa stringa (CSS 3.0)

Il selettore è del tutto identico ai precedenti con un'unica differenza fondamentale: iIl valore deve essere contenuto nel valore assegnato all'attributo.  La sintassi per questa tipologia è la seguente:

elemento[attributo*="valore"] { dichiarazioni CSS }

Il confronto effettuato è case sensitive. Il seguente esempio:

a[title*="lorem"] {color: white; text-decoration: underline;}

 assegna il colore bianco (white) e la sottolineatura a tutti gli elementi <a> che contengono nell'attributo title la sottostringa lorem. Vediamo questo esempio per comprenderne esattamente il suo funzionamento:

<STYLE>
h1[title*="lorenzo"] { color: red }
</STYLE>
<h1 title="lorenzo">Testo A in rosso</h1>
<h1 title="lorenzotto">Testo B in rosso</h1>
<h1 title="Lorenzo">Testo C (il confronto case sensitive)</h1>
<h1 title="Allorenzotto">Testo D in rosso</h1>
<h1 title="Calorenzo">Testo F in rosso</h1>
<h1 title="caio-lorenzo">Testo G in rosso</h1>

PSEUDO CLASSI E CLASSI STRUTTURALI:

Nella versione 2 dei CSS, la specifica prevedeva sei pseudo-classi principali. Di esse, quattro hanno trovato il loro utilizzo primario nella definizione degli stili per i diversi stati dei collegamenti ipertestuali (tag <A>):

:link

:visited

:hover

:active

Importante anche la pseudo-classe :focus, utile, tra l'altro, per modificare lo stile di un campo di input nel momento in cui riceve il focus.

La lista si chiude con :first-child, attraverso la quale è possibile selezionare il primo elemento figlio di un altro elemento.

Con la versione 3 dei CSS la lista si è notevolmente ampliata e viene introdotto il concetto di pseudo-classe strutturale.

Le pseudo-classi strutturali (CSS 3.0)

Le pseudo-classi strutturali sono uno strumento che consente di selezionare gli elementi all'interno della pagina in base a delle informazioni sull'oggetto che non possono essere raggiunte da selettori semplici o combinatori. Sintatticamente vengono definite come quelle previste nelle precedenti specifiche: una pseudo-classe si definisce attraverso il segno : seguito dal nome della pseudo-classe.

:nomePseudoClasse { dichiarazioni CSS }

Prima di analizzare ogni pseudo-classe, facciamo una precisazione necessaria alla corretta comprensione dell'argomento. Dato un qualsiasi oggetto all'interno del DOM, se l'oggetto contiene degli elementi figli, l'indice dei figli, contrariamente ai linguaggi di programmazione, inizia da 1 e non da 0. Fatta questa doverosa premessa, vediamo ora quali sono le pseudo-classi strutturali, analizzandole una per una.

Elemento:root
Elemento:nth-child()
Elemento:nth-last-child()
Elemento:last-child
Elemento:only-child
Elemento:nth-of-type()
Elemento:nth-last-of-type()
Elemento:first-of-type
Elemento:last-of-type
Elemento:only-of-type
Elemento:empty

Elemento:root

La pseudo-classe :root identifica l'elemento radice della pagina. Per pagine HTML l'elemento corrispondente è proprio <html>. Pertanto le seguenti righe di codice sono equivalenti

html {background-color: red; color: white}
:root {background-color: red; color: white}

Elemento:nth-child()

Sicuramente è la pseudo-classe più importante ed interessante. Elemento:nth-child(n) identifica l'Elemento che è l'n-esimo figlio del suo elemento padre. I suoi utilizzi sono tantissimi, così come le sue potenzialità. Andiamo ad esaminare nel dettaglio tutti i possibili casi in cui possiamo utilizzare la pseudo-classe fornendo un esempio per ciascuno.

Vediamo innanzitutto un esempio del caso base, ovvero del più semplice degli utilizzi che si può fare di questa pseudo-classe. Supponiamo di avere una tabella (vedi esempio sottostante) e di voler evidenziare una sola delle righe. Con le versioni precedenti dei CSS era sufficiente aggiungere una classe alla riga d'interesse e creare una regola di stile ad hoc per essa. Con la nuova pseudo-classe, invece, tutto diventa più semplice. È sufficiente scegliere il numero della riga da selezionare e realizzare una regola di stile solo per lei, come nella seguente riga di codice:

<STYLE>
tr:nth-child(4) { background-color: #FFFF00 } /* Colora lo sfondo di giallo la 4 riga */
td:nth-child(2) { color: red } /* Colora il testo di rosso della 2 colonna */
</STYLE>
<table Border=1 cellspacing=0>
<tr><th>Cognome</th><th>Nome</th><th>Eta</th></tr>
<tr><td>Rossi</td><td>Mario</td><td>23</td></tr>
<tr><td>Verdi</td><td>Luca</td><td>33</td></tr>
<tr><td>Bianchi</td><td>Federica</td><td>24</td></tr>
<tr><td>Ferrari</td><td>Luana</td><td>23</td></tr>
<tr><td>Esposito</td><td>Giovanni</td><td>43</td></tr>
</table>

Un altro caso in cui ci viene incontro :nth-child è quello in cui si abbia bisogno di colorare in maniera alternata le righe di una tabella per migliorarne la leggibilità e l'estetica. Prima bisognava assegnare alternativamente delle regole CSS oppure utilizzare Javascript per realizzare l'effetto.

Utilizzando la stessa tabella dell'esempio precedente, possiamo usare queste due semplicissime righe di codice CSS:

<STYLE>
tr:nth-child(even) {background-color: #DBEEF4}
tr:nth-child(odd) {background-color: #EDF6FB}
</STYLE>
<table Border=1 cellspacing=0>
<tr><th>Cognome</th><th>Nome</th><th>Eta</th></tr>
<tr><td>Rossi</td><td>Mario</td><td>23</td></tr>
<tr><td>Verdi</td><td>Luca</td><td>33</td></tr>
<tr><td>Bianchi</td><td>Federica</td><td>24</td></tr>
<tr><td>Ferrari</td><td>Luana</td><td>23</td></tr>
<tr><td>Esposito</td><td>Giovanni</td><td>43</td></tr>
</table>

Passiamo ora a dei casi più complessi. Nel contesto della pseudo-classe nth-child() è possibile inserire delle formule più articolate che consentono di realizzare pattern molto più complessi. Il pattern delle formule è nella forma:

an + b

dove a e b sono numeri interi. Tale pattern identifica l'elemento figlio che si trova alla distanza an+b-1 dal primo elemento figlio. Nel caso i figli dell'elemento siano molti, il pattern selezionerà tutti i fratelli che si trovano alla stessa distanza tra di loro. Il valore contenuto dal token b indica la distanza di partenza, ovvero dopo quanti elementi bisogna far partire la formula. Vediamo un esempio per chiarire il concetto. La seguente istruzione CSS

tr:nth-child(3n+2) {background-color: #EDF6FB}

assegna un colore di sfondo diverso ogni tre righe della tabella, iniziando a contare però dalla seconda riga.  Ecco un esempio più articolato che colora la tabella con la terna di colori giallo, magenta, ciano partendo dalla 5 riga.

<STYLE>
tr:nth-child(3n+5) { background-color: #FFFF00; }
tr:nth-child(3n+6) { background-color: #FF00FF; }
tr:nth-child(3n+7) { background-color: #00FFFF; }
</STYLE>
<table cellspacing=0 border=1>
<tr><th>Cognome</th><th>Nome</th><th>Eta</th></tr>
<tr><td>Rossi</td><td>Mario</td><td>23</td></tr>
<tr><td>Verdi</td><td>Luca</td><td>33</td></tr>
<tr><td>Bianchi</td><td>Federica</td><td>24</td></tr>
<tr><td>Ferrari</td><td>Luana</td><td>23</td></tr>
<tr><td>Esposito</td><td>Giovanni</td><td>43</td></tr>
<tr><td>Rossi</td><td>Francesca</td><td>35</td></tr>
<tr><td>Bruno</td><td>Michele</td><td>53</td></tr>
<tr><td>Marchetti</td><td>Elisa</td><td>24</td></tr>
<tr><td>Marini</td><td>Roberto</td><td>43</td></tr>
<tr><td>Greco</td><td>Gabriele</td><td>51</td></tr>
</table>

Nel caso in cui il valore a sia uguale a 1 o il valore b sia uguale a 0, possiamo ometterli. Vediamo ora alcuni casi particolari, specificando come verranno interpretati  dal browser.

/* le seguenti regole sono del tutto identiche */
tr:nth-child(2n+0)
tr:nth-child(2n)
tr:nth-child(even)
/* le seguenti regole sono del tutto identiche */
tr:nth-child(2n+1)
tr:nth-child(odd)
/* le seguenti regole sono del tutto identiche */
tr:nth-child(0n+5)
tr:nth-child(5)
/* le seguenti regole sono del tutto identiche */
tr:nth-child(1n+0)
tr:nth-child(n+0)
tr:nth-child(n)
/* le seguenti regole sono del tutto identiche
il valore di n è arbitrario purchè il risultato sia (an+b)>=1 */
tr:nth-child(10n-1) /* selezionerà l'elemento 9, 19, 29, ecc */
tr:nth-child(10n+9) /* selezionerà l'elemento 9, 19, 29, ecc */

Poniamo un attimo attenzione all'ultimo esempio. Come abbiamo potuto notare è possibile utilizzare anche valori negativi per b all'interno della pseudo-classe.  Il valori di n ammessi saranno quelli che forniscono alla formula un valore positivo. Ad esempio 10n-1 ==> n=1,2 ,3, ...  mentre 10n+9 => n=0,1, 2, ... . La cosa importante quindi è districarsi bene tra le formule matematiche.

Elemento:nth-last-child()

Funzionamento identico alla pseudo-classe precedente, Elemento:nth-last-child(n) identifica l'Elemento che è l'n-esimo figlio del suo elemento padre partendo dall'ultimo fratello di Elemento. Gli esempi fatti in precedenza sono del tutto validi anche per questa pseudo-classe. Quindi, per non essere ripetitivi, analizzeremo solo il caso base. Supponendo di avere la solita tabella dei precedenti esempi, un codice come il seguente

tr:nth-last-child(2) { background-color: yellow}

evidenzierà la penultima riga della tabella.

Elemento:last-child

Questa pseudo-classe seleziona l'Elemento che rappresenta l'ultimo figlio del suo elemento genitore. Il funzionamento è molto semplice. Continuando a utilizzare la tabella precedente, la seguente regola CSS:

<STYLE>
tr:last-child {background-color: yellow}
</STYLE>
<table Border=1 cellspacing=0>
<tr><th>Cognome</th><th>Nome</th><th>Eta</th></tr>
<tr><td>Rossi</td><td>Mario</td><td>23</td></tr>
<tr><td>Verdi</td><td>Luca</td><td>33</td></tr>
<tr><td>Bianchi</td><td>Federica</td><td>24</td></tr>
<tr><td>Ferrari</td><td>Luana</td><td>23</td></tr>
<tr><td>Esposito</td><td>Giovanni</td><td>43</td></tr>
</table>

evidenzierà l'ultima riga della tabella.

Elemento:only-child

only-child identifica un Elemento il cui oggetto padre non ha altri figli. Supponendo di avere un codice HTML come il seguente:

<STYLE>
p span:only-child {background-color: yellow}
</STYLE>
<p>Lorem
   <span>ipsum dolor sit</span> amet.
</p>
<p>Lorem
   <span>ipsum</span>
   dolor
   <span>sit amet</span>.
</p>
<p>Lorem
   <span>ipsum
         <span> dolor sit </span>
         amet
   </span>.
</p>

verrà messo uno sfondo giallo allo <span> del primo paragrafo e del terzo perché li è presente un solo figlio diretto mentre nel secondo paragrafo ce ne sono due.

Elemento:nth-of-type()

La pseudo-classe identifica ogni Elemento che è l'n-esimo fratello dello stesso tipo all'interno del DOM. Detto in parole più semplici, supponendo che un oggetto abbia diversi figli, di tipo diverso, con tale pseudo-classe si possono raggiungere solo gli elementi del tipo di cui abbiamo bisogno.

Vediamo un semplice esempio per capirne il funzionamento. Prendiamo come esempio un elemento <div> nella pagina. Sappiamo benissimo che al suo interno possono esserci diversi tipi di elementi, tutti allo stesso livello. Se vogliamo raggiungere solo gli elementi di tipo p, distanziati ad esempio di 2, possiamo utilizzare la seguente regola:

div p:nth-of-type(2n) {background-color: yellow}

Come nth-child(), anche questa pseudo-classe può contenere all'interno delle formule an+b quindi il suo funzionamento è del tutto simile a quello illustrato in precedenza.

Elemento:nth-last-of-type()

Come per nth-last-child(), anche per questa pseudo-classe il funzionamento è del tutto simile alla precedente, solo che si inizia a contare dall'ultimo elemento.
Volendo selezionare il penultimo elemento di tipo <p> all'interno di un <div> abbiamo bisogno del seguente codice:

div p:nth-last-of-type(2) {background-color: yellow}

Elemento:first-of-type e Elemento:last-of-type

Questa pseudo-classe seleziona il primo / ultimo Elemento che è il primo / ultimo figlio del suo tipo. Concettualmente essa coincide con l'uso di :nth-of-type(1) / :nth-last-of-type(1). La seguente regola determinerà uno sfondo giallo sul primo ed sull'ultimo tag <p> interni ad un tag <div>:

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

Elemento:only-of-type

Il funzionamento è del tutto simile a Elemento:only-child con la sola differenza che l'oggetto padre può contenere altri figli, purché di diverso tipo.
Quindi, dato un codice come il seguente:

<STYLE>
div p:only-of-type {color: red}
</STYLE>
<div>
  <p>Testo A.1 in ROSSO</p>
  <span>Testo A.2</span> <!-- Non è un tag p -->
</div>
<div>
  <p>testo B.1</p> <!-- div ha più di un tag <p> come discendente -->
  <span>testo B.2</span> <!-- Non è un tag p -->
  <p>testo B.3</p> <!-- div ha più di un tag <p> come discendente -->
<div>
<div>
  <span><span><p>Testo C.1 in ROSSO</p><span></span>
</div>
<div>
  <span><span><p>Testo D.1</p><span></span> <!-- div ha più di un tag <p> come discendente -->
  <p>Testo D.2</p> <!-- div ha più di un tag <p> come discendente -->
</div>

verrà selezionato il 1°  paragrafo del primo contenitore e del 3° perché contiene un solo <p> come discendente. Nel 2° contenitore e nel 4°, sono presenti due tag <p> come  elementi discendenti.

Elemento:empty

Questa pseudo-classe identifica ogni Elemento che non contiene figli. Elemento:empty esclude quindi anche i nodi che contengono del semplice testo. Quindi, un semplice paragrafo che contiene del testo al suo interno non soddisferà la regola CSS come si vede nell'esempio successivo.

<STYLE>
div {border: 1px solid black; height:12pt}
div:empty {background-color: yellow}
</STYLE>
<div></div>
<div><span></span></div>
<div>Lorem ipsum</div>

Nel precedente esempio solo il primo <div> corrisponderà alla regola CSS con :empty.

ALTRE PSEUDO CLASSI

In questa sezione prenderemo in esame un altro gruppo interessante di pseudo-classi definite in CSS3:

Pseudo-classe :target
Pseudo-classe :not
Pseudo-classi degli stati degli elementi della UI (User Interface)

Elemento:target

La pseudo-classe :target ha una potenzialità davvero interessante. Ci consente di selezionare un Elemento della pagina che corrisponde ad un indirizzo di riferimento. Più precisamente, data una pagina con delle ancore al proprio interno, la pseudo-classe :target ci consente di assegnare uno stile all'elemento di destinazione dell'ancora nel momento in cui è selezionato con un click sul link. Vediamone un esempio per comprenderne il funzionamento:

<STYLE>
div:target {border: 3px solid red}
</STYLE>
<ul>
<li><a href="#div1">Div1</a></li>
<li><a href="#div2">Div2</a></li>
<li><a href="#div3">Div3</a></li>
<li><a href="#div4">Div4</a></li>
</ul>
<div id="div1"><p>Lorem ipsum dolor sit amet ....</p></div>
<div id="div2"><p>Sit et et scelerisque Phasellus ...</p></div>
<div id="div3"><p>Adipiscing eros quis eu fringilla...</p></div>
<div id="div4"><p>Condimentum Vivamus iaculis .... </p></div>

In questo modo, possiamo mettere in evidenza il <div> selezionato, senza aver bisogno di utilizzare Javascript o altri hack particolari. Abbiamo infatti espresso con questo CSS la seguente regola: su tutti i <div> che sono anche target di un ancora, quando vengono attivati, impostiamo un bordo rosso spesso 3px.

Elemento:not

La pseudo-classe di negazione è identificata dal costrutto :not() che prende in ingresso un selettore semplice. Tale pseudo-classe identifica tutti gli elementi di tipo Elemento che non coincidono con il selettore contenuto all'interno del :not.

Cerchiamo di chiarire il concetto con questo esempio.

<STYLE>
div:not(.nero) {color: red}
</STYLE>
<div class="nero">Lorem ipsum</div>
<div class="rosso">Lorem ipsum - Sarà ROSSO</div>
<div class="verde">Lorem ipsum - Sarà ROSSO</div>

Nell'esempio appena presentato assegniamo un testo di colore rosso ai <div> che non abbiano la classe uguale a nero.

Vediamo un altro esempio che verrà ripreso anche nella prossima sezione. Il seguente codice

input:not(:disabled){color: red; border: 1px solid black}

seleziona tutti gli elementi di tipo <input> che non sono disabilitati.

PSEUDO CLASSI DELLA USER INTERFACE

Le pseudo-classi della User Interface sono:

Elemento:enabled
Elemento:disabled
Elemento:checked

Elemento:enabled

Il selettore :enabled seleziona tutti gli oggetti di tipo Elemento che sono abilitati all'interno di un'interfaccia utente. Il seguente esempio pone il colore del testo a rosso nei controlli non disabilitati.

<STYLE>
input:enabled {color:red}
</STYLE>
<input type="text" value="Nome" />
<input type="text" value="Cognome" />
<input type="text" value="Indirizzo" disabled />

Il selettore, quindi, ha lo stesso effetto dell'esempio utilizzato nella sezione della pseudo-classe :not.

input:not(:disabled){color: red}

Elemento:disabled

Il selettore Elemento:disabled è il contrario della pseudo-classe vista in precedenza. Esso infatti seleziona tutti gli elementi di tipo Elemento che sono disabilitati all'interno di un'interfaccia utente.

Elemento:checked

La pseudo-classe Elemento:checked identifica tutti gli elementi Elemento di un'interfaccia utente che risultano spuntati. Nell'esempio sottostante l'elemento spuntato verrà spostato a destra (grazie alla variazione del margine sinistro) e la sua etichetta colorata di rosso. Ecco l'esempio:

<STYLE>
input:checked+label { color:red }
input:checked { margin-left:20px }
</STYLE>
<input type="checkbox" Name=Presente><label for=Present> Presente</label><BR>
<input type="checkbox" /><label> In vacanza</label><BR>
<input type="radio" Name=Genere /><label> Maschio</label><BR>
<input type="radio" Name=Genere /><label> Femmina</label><BR>

La 2° regola determina un rientro  verso destra di 20 pixel mentre la prima (+ selettore fratelli adiacenti!) comporta la colorazione del testo dell'etichetta (<label>) di rosso.

PSEUDO CLASSI PER LA VALIDAZIONE

Si tratta di pseudo-classi che vanno in qualche modo ad affiancarsi a quelle destinate per definire gli stili per i vari stati dei controlli legati all'interfaccia utente, ovvero (:hover , :active , :focus , :enabled , :disabled , :checked)

Ecco l'elenco delle pseudo classi mancanti:

Il loro contesto di utilizzo primario è quello della validazione dei form. In particolare, sono pensate per affiancare a livello di presentazione i nuovi di tipi di input e di attributi per i form definiti in HTML5.

PSEUDO ELEMENTI

Le precedenti specifiche dei CSS prevedono quattro pseudo-elementi:

:first-letter: seleziona e formatta la prima lettera del testo contenuto in un elemento (paragrafo, div, etc...);
:first-line: seleziona e formatta la prima riga del testo contenuto in un elemento (paragrafo, div, etc...);
:before: genera e inserisce del contenuto prima di un dato elemento;
:after: genera e inserisce del contenuto dopo un dato elemento.

La specifica CSS3 non ha introdotto novità rispetto al numero di pseudo-elementi, salvo che per uno pseudo-elemento :selection che dovrebbe servire a formattare in modi specifici il testo presente in una pagina quando viene selezionato dall'utente. Al momento, però, pur essendo supportato da diversi browser, :selection è stato rimosso dal modulo.

Una novità riguarda invece la sintassi. A partire dai CSS3, uno pseudo-elemento si definisce usando due segni di due punti (::) invece che uno solo. Ciò per distinguere nella sintassi gli pseudo-elementi dalle pseudo-classi. Per mantenere la retro-compatibilità con il codice esistente, i browser sono tenuti a supportare entrambe le sintassi. Rispettando dunque quanto fissato nella specifica dovremmo scrivere:

::first-letter
::first-line
::before
::after

Per il resto rimangono valide tutte le considerazioni e gli esempi della Guida CSS di base. Gli pseudo-elementi sono supportati, salvo qualche dettaglio nell'implementazione avanzata di ::before e ::after, da tutti i principali browser. Vediamo un esempio che, come nei manoscritti, imposta la prima lettera di un paragrafo a caratteri cubitali.:

<STYLE>
p {
   width: 500px;
   line-height: 1.5;
   text-align:justify;
}

p::first-line {
   text-decoration:overline;
}

p::first-letter {
   border:3px double black;
   border-radius: 5px;
   line-height: 1;
   font-size: 250%;
   padding: 0px 5px;
   margin-right: 6px;
   float: left;
}
</STYLE>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>