Le pseudo-classi CSS3

Tempo stimato di lettura: 10 minuti, 6 secondi
Pubblicato il 26 Novembre 2012
in:
Webdesign
- Lascia un commento

Oggi parleremo di un argomento spesso sottovalutato nell’ambito web, le pseudo-classi, che grazie alla specifica css3, hanno raggiunto un’elevata maturità e danno la possibilità di usare meno classi e id per identificare i vari nodi del documento, oltre alla possibilità di creare effetti particolari senza ricorrere a javascript.

elem:root

Rappresenta l’ elemento radice del documento che è rappresentato sempre dal tag <html>, anche se non esplicitamente dichiarato.

elem:empty

Viene applicato all’elemento scelto che deve essere privo di contenuto che sia testo o tag html.

Nell’esempio mostrato qui di seguito vediamo che verrà inserito un bordo nero se il paragrafo contiene testo, se invece non ha contenuto il bordo sarà rosso.

css

p{border : 2px solid black;}
p:empty {border:2px solid red}

html

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummynibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

elem:only-child

Si applica all’elemento prescelto, solo se è l’ unico elemento figlio dell’elemento html.

Di seguito l’ esempio che mostra nel primo caso <span> che essendo figlio dell’elemento html accetta la regola, nel secondo invece venendo dopo l’elemento <span> non recepisce la regola

css

span:only-child {font-size: 1.5em;}

html

<p>Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit</span>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit, sed diam nonummy nibh euismod tincidunt <span>ut laoreet dolore magna</span> aliquam erat volutpat.</p>

elem:only-of-type

Si applica solo se l’ elemento scelto è unico di quel tipo all’interno di un altro tag.

In questo caso la regola non viene recepita nel primo paragrafo perché contiene due elementi <span>, ma nel secondo caso anche se c’è un elemento <mark>, <span> recepisce la regola perché è l’ unico tag di quel tipo all’interno di <p>.

css

span:only-of-type {font-size: 1.5em;}

html

<p>Lorem ipsum dolor sit amet, <span>consectetuer</span> adipiscing elit, sed diam nonummy nibh euismod tincidunt <span>ut laoreet dolore magna</span> aliquam erat volutpat.</p>

<p>Lorem ipsum dolor sit amet, <span>consectetuer adipiscing elit</span>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magnaaliquam erat volutpat.</p>

elem:nth-child(n)

Questa è una pseudo classe molto potente e versatile, infatti può intervenire in modo mirato all’interno del documento per impostare determinate regole, grazie all’espressione “an+b” dove an rappresenta la frequenza con la quale applicare la regola e b lo scostamento, cioè quanti elementi lasciare prima di applicare la regola definita precedentemente. Una caratteristica interessante il fatto che si possa usare anche solo “an” per indicare l’alternanza o “b” lo scostamento.

Qui mostro uno dei possibili utilizzi (gli altri li potete trovare negli esempi allegati).

Dove è possibile alternare i colori delle righe della tabella, in questo caso si può usare anche una sintassi semplificata odd o even.

css

tr:nth-child(2n) {background: #ccc;}

html (estratto)

<tr>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
  </tr>
  <tr>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
  </tr>
  <tr>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
    <td>Lorem ipsum </td>
  </tr>

elem:nth-last-child(n)

funziona allo stesso modo del precedente, solo che il conteggio parte dall’ultimo elemento

elem:nth-of-type(n)

Questo è una variante di nth-child(n) infatti prende in considerazione solo gli elementi dello stesso tipo.

In questo esempio vediamo come sia possibile disporre le immagini in modo alternato, anche se non sono una di seguito all’altra, ma tra dei tag <dd>.

css

img {margin: 0em 0.4em 0.5em }
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

html

<img src="img/red.jpg" width="80" height="80" alt="red" />
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit. …..</dd>
<img src="img/blu.jpg" width="80" height="80" alt="blu" />
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit. Nulla consequat ante......</dd>
<img src="img/verde.jpg" width="80" height="80" alt="verde" />
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit...... </dd>

elem:nth-last-type(n)

Identico al precedente, ma parte dall’ultimo elemento.

elem:last-child

Si applica all’ultimo elemento innestato in un contenitore.

In questo caso osservando il codice si può osservare che la regola modifica il colore del testo dell’ultimo elemento dd.

css

dd:last-child { color:green;}

html

<img src="img/red.jpg" width="80" height="80" alt="red" />
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit. …..</dd>
<img src="img/blu.jpg" width="80" height="80" alt="blu" />
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit. Nulla consequat ante......</dd>
<img src="img/verde.jpg" width="80" height="80" alt="verde" />
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit...... </dd>

elem:first-of-type

Si applica al primo elemento che si è scelto.

In questo caso si applica al primo elemento <li>.

css

li:first-of-type {color: red;}

html

<ol>
<li>lorem</li>
<li>ipsum</li>
<li>consectetur </li>
<li>accumsan</li>
<li>adipiscing </li>
<li>ornare</li>
<li>Vestibulum </li>
<li>Toes</li>
</ol>

elem:last-of-type

Si applica all’ultimo elemento che si è scelto. Qui viene colorato l’ ultimo elemento li.

css

li:last-of-type {color: red;}

html

<ol>
<li>lorem</li>
<li>ipsum</li>
<li>consectetur </li>
<li>accumsan</li>
<li>adipiscing </li>
<li>ornare</li>
<li>Vestibulum </li>
<li>Toes</li>
</ol>

elem:target

Questa è una pseudo-classe dinamica come :focus o :hover e rende possibile mettere in evidenza un determinato elemento tramite un collegamento ipertestuale.

Di seguito mostro l’esempio: quando si clicca su un dei link, il testo associato viene evidenziato con un colore di sfondo.

css

dl:target {background: #62ace0;}

html

<p><a href="#primo">sit amet</a> | <a href="#secondo">quis ligula</a></p>
<dl id="primo">
<dt>sit amet</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit.volutpat. ….</dd>
</dl>
<dl id="secondo">
<dt>quis ligula</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit....... </dd>
</dl>

elem:enable, elem:disable, elem:cecked

Queste pseudo-classi si possono applicare nell’ambito dei form o per creare effetti particolari.

In questo esempio grazie alla pseudo-classe :cecked si può vedere com’è possibile nascondere o mostrare l’elemento <p> cliccando sul pulsante.

css

#bottone:checked ~ * .expandable {
display: in-line;
background: #cccccc;
}

#bottone:checked ~ p.expandable, #bottone:checked ~ * p.expandable {
display: block;
background: #cccccc;
}

html

<input type="checkbox" id="bottone" />
<p class="expandable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut sem elit. Mauris ornare metus velit...</p>
<p><label for="bottone" id="bottone-colore">mostra il testo</label></p>

elem:not

Applica la regola a tutti gli elementi del tipo selezionato, ad esclusione di quella impostata come “introduzione” tramite id.

css

p:not(#introduzione) {background: #efefef;}

html

<p id="introduzione">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

E~F

Questa regola è molto particolare infatti, si applica all’elemento “F” che si trova dopo l’elemento “E” e che condividono lo stesso elemento padre.

In questo esempio la regola {color: orange; font-weight: bold;} non viene applicata al primo paragrafo, perché anche se ha la class esempio non è preceduto da un elemento <h2> e neanche all’ultimo elemento <p> che anche se preceduto da un tag h2, non contiene la classe esempio, quindi l’unico che soddisfa entrambe le condizioni è il secondo tag <p> della pagina che è preceduto da un elemento <h2> e ha la classe esempio.

css

h2 ~ p.esempio {color: orange; font-weight: bold;}

html

<p class="esempio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac ligula non neque sodales pretium. Nulla facilisi. Vestibulum semper urna sit amet diam sagittis a gravida velit venenatis. Etiam laoreet sapien mollis nunc tincidunt adipiscing. Phasellus ut libero ullamcorper enim ornare aliquet. Nunc auctor augue sit amet elit suscipit feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div>

<h2>Lorem ipsum</h2>

<div > <h2>Lorem ipsum</h2>

<p class="esempio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac ligula non neque sodales pretium. Nulla facilisi. Vestibulum semper urna sit amet diam sagittis a gravida velit venenatis. Etiam laoreet sapien mollis nunc tincidunt adipiscing. Phasellus ut libero ullamcorper enim ornare aliquet. Nunc auctor augue sit amet elit suscipit feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div>

<h2>Lorem ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac ligula non neque sodales pretium. Nulla facilisi. Vestibulum semper urna sit
amet diam sagittis a gravida velit venenatis. Etiam laoreet sapien mollis nunc tincidunt adipiscing. Phasellus ut libero ullamcorper enim ornare aliquet.Nunc auctor augue sit amet elit suscipit feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

Scarica tutti gli esempi dell’articolo

Conclusioni

Eccoci arrivati alla fine di questa panoramica che mostra alcune potenzialità di queste pseudo-classi anche se i campi di applicazione sono molto più vasti.

Tu li conoscevi già? E se si li usi abitualmente?

Print Friendly, PDF & EmailStampa PDF
Shares