Altre pseudo-classi nei CSS3

Nei precedenti articoli riguardanti i selettori della nuova specifica CSS ci siamo occupati dei seguenti argomenti:

1. I selettori di attributo nei CSS3
2. Le pseudo-classi strutturali nei CSS3

In questo articolo della serie, invece, ci occuperemo di altre pseudo-classi.

Le pseudo-classi trattate in questo articolo sono:

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

Pseudo-classe target

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

Vediamo un esempio per comprenderne il funzionamento.

Dato un codice HTML come il seguente:

<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>

attraverso questa semplicissima riga CSS:

div:target { border: 1px dotted red; }

possiamo mettere in evidenza il div selezionato, senza aver bisogno di utilizzare Javascript o altri hack particolari.

Vediamo l'esempio in azione provando a cliccare su ognuno dei link presenti e vedendo cosa succede.

Pseudo-classe not

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

Cerchiamo di chiarire il concetto con qualche esempio. Dato un codice CSS come il seguente:

:not(p) { border:1px solid red; }

tutti gli elementi di una pagina, esclusi quelli di tipo paragrafo, avranno un bordo rosso intorno.

Esempio 1.

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

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

identifica tutti gli elementi di tipo input che non sono disabilitati.

Esempio 2.

Pseudo-classi degli stati degli elementi della UI (User Interface)

Il titolo di questa sezione è davvero fuorviante ma purtroppo durante la traduzione letterale della specifica non sempre si ottiene qualcosa di chiaro. Volendo essere più chiari, possiamo dire che le pseudo-classi racchiuse in questa categoria riguardano l'interfacciamento della pagina con l'utente e, più precisamente, consentono di gestire lo stato in cui si trova un elemento dell'interfaccia utente. Per interfaccia utente ci si riferisce a quella serie di strumenti che consentono all'utente di interagire con la pagine. Nella maggioranza dei casi tali strumenti sono caratterizzati dalle form e dagli elementi in essa contenuti.

Le pseudo-classi della User Interface sono:

• E:enabled
• E:disabled
• E:checked

E:enabled

Il selettore E:enabled seleziona tutti gli oggetto di tipo E che sono abilitati all'interno di un'interfaccia utente.

Dati i seguenti campi di input:

<input type="text" value="Nome" />
<input type="text" value="Cognome" />
<input type="text" value="Indirizzo" disabled="disabled" />

il seguente codice CSS:

input:enabled {color:red}

assegnerà il colore rosso solo ai campi abilitati, ignorando i restanti.

Esempio.

Il selettore quindi ha lo stesso effetto dell'esempio 2 utilizzato nella sezione della pseudo-classe not. E' semplicemente un metodo più pulito per ottenere lo stesso risultato.

E:disabled

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

Dato lo stesso esempio precedente, un codice come il seguente:

input:disabled {color:red}

corrisponde all'esatto contrario, ovvero assegnerà un colore rosso solo ai campi disabilitati.

Esempio.

E:checked

La pseudo-classe E:checked identifica tutti gli elementi E di un'interfaccia utente che vengono selezionati. Data la scarsa personalizzazione consentita dai browser agli elementi radio e checkbox a cui viene assegnato tale selettore, per l'esempio corrispondente non modificherò colori o bordi ma utilizzerò un margine per far spostare l'elemento selezionato.

Dato un codice HTML come il seguente:

<input type="checkbox" value="Nome" />Nome
<input type="checkbox" value="Cognome" />Cognome
<input type="checkbox" value="Indirizzo" />Indirizzo

e il seguente codice CSS:

input:checked { margin-left:20px; }

nel momento in cui viene selezionata una delle checkbox vedremo spostarsi verso destra la riga corrispondente ad essa.

Esempio.

Compatibilità con i browser

Escludendo Internet Explorer in ogni sua versione che non supporta nessuno dei selettori trattati finora, i restanti browser hanno un supporto completo a tutte le pseudo-classi presentare in questo articolo. Unica eccezione Opera che ancora non supporta il selettore checked, come possiamo visualizzare nella seguente tabella.

Tutti gli esempi sono dispnibili per il download.