Altre pseudo-classi

In questa lezione prenderemo in esame un altro gruppo interessante di pseudo-classi definite nel modulo sui selettori dei CSS3:

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

E: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 àncore al proprio interno, la pseudo-classe E:target ci consente di assegnare uno stile all'elemento di destinazione dell'àncora nel momento in cui è selezionato.

Vediamo un esempio per comprenderne il funzionamento partendo dal codice HTML:

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

Abbiamo una lista di link. Ciascuno presenta come valore di href il riferimento ad un div di destinazione identificato dal suo id. Nulla di speciale insomma, una struttura di navigazione interna alla pagina vista e stravista.

Ora definiamo questa semplicissima regola CSS:

div:target {border: 3px solid red}

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

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

E: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. E partiamo da questo codice HTML:

<div class="nero">Lorem ipsum</div>
<div class="rosso">Lorem ipsum</div>

Usando questo codice CSS:

div:not(.nero) {color: red}

assegniamo un testo di colore rosso ai div che non abbiano come classe .nero.

Esempio.

Vediamo un'altra demo che verrà ripresa 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.

Esempio.

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 rappresentati dai 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 oggetti 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" />

questo codice CSS:

input:enabled {color:red}

assegnerà il colore rosso per il testo solo ai campi abilitati, ignorando gli altri.

Esempio.

Il selettore, quindi, ha lo stesso effetto dell'esempio utilizzato nella sezione della pseudo-classe :not. È 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 per cui è pensato tale selettore, per l'esempio corrispondente non modificherò colori o bordi ma utilizzerò un margine per far spostare l'elemento selezionato.

Dato questo codice HTML

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

e questo 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.

Tabella del supporto sui browser

Altre pseudo-classi
E:target	9.0+	1.0+	3.1+	1.0+	10.5+
E:not	9.0+	1.5+	1.0+	1.0+	9.5+
E:enabled	9.0+	1.5+	3.1+	1.0+	9.0+
E:disabled	9.0+	1.5+	3.1+	1.0+	9.0+
E:checked	9.0+	1.5+	3.1+	1.0+	9.0+