CSS  »  Articoli  »  CSS 3 

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.

Altri articoli

Altre guide

Altre newsletter