Le pseudo-classi CSS3

css3
Tempo stimato di lettura: 3 minuti, 59 secondi
Pubblicato il 26 novembre 2012

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

html

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

html

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

html

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

html (estratto)

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

html

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

html

elem:first-of-type

Si applica al primo elemento che si è scelto.

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

css

html

elem:last-of-type

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

css

html

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

html

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

html

elem:not

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

css

html

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

html

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?

Shares