Selettori CSS: Pseudo Classi Strutturali Parte 1

Analisi progettuale delle pseudo-classi CSS

by admin admin Date: 11-04-2013

Al giorno d'oggi gli sviluppatori web, principalmente coloro che si occupano di front-end, non devono solo studiare e capire i CSS ma devono cercare di trovare la maniera piú efficace ed efficente per scrivere un ottimo codice CSS.

Con la versione 3 dei CSS la lista delle classi e delle pseudo classi, prima limitata a

:link
:visited
:hover
:active
:focus
:first-child

si è notevolmente ampliata e viene introdotto per la prima volta il concetto di pseudo-classe strutturale.

Prima di enumerare e spiegare alcune delle nuove pseudo classi strutturali ci soffermeremo sulla sintassi da utilizzare.

La sintassi delle pseudo classi

Una pseudo-classe non definisce un elemento ma un particolare stato di quest’ultimo. In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni. A livello sintattico, una pseudo-classe non può essere mai dichiarata da sola, bensì deve appoggiarsi ad un elemento. La sintassi è la seguente:

selector:pseudo-class {property: value}

Il segno di due punti (:) divide, senza ulteriori spazi, l’elemento dal nome della pseudo-classe ad esso associato.

Una pseudo-classe può anche essere associata a selettori di tipo classe. In questo caso la pseudo-classe deve seguire la dichiarazione della classe e le regole di stile definite saranno applicate esclusivamente all’elemento con attributo class dichiarato.

selector.class:pseudo-class {property: value}

La tabella che segue ci offre uno sguardo d'insieme dei nuovi selettori disponibili nei CSS3. Tratteremo nel nostro blog, solo quei selettori che hanno avuto una qualche implementazione nei browser. Per ulteriori informazioni si consulti il documento del W3C.

**Sintassi dei selettori CSS3**
Tipo di selettore	Pattern	Descrizione
Selettore di attributo che seleziona una sottostringa	E[att^=”val”]	Seleziona ogni elemento E il cui valore di attributo `att` inizia “val”.
Selettore di attributo che seleziona una sottostringa	E[att$=”val”]	Seleziona ogni elemento E il cui valore di attributo `att` termina con “val”.
Selettore di attributo che seleziona una sottostringa	E[att*=”val”]	Seleziona ogni elemento E il cui valore di attributo `att` contiene la sottostringa “val”.
Pseudo-classe strutturale	E:root	Seleziona l'elemento radice del documento. In HTML, l'elemento radice è sempre l'elemento `html`.
Pseudo-classe strutturale	E:nth-child(n)	Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore.
Pseudo-classe strutturale	E:nth-last-child(n)	Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore, partendo dall'ultimo figlio.
Pseudo-classe strutturale	E:nth-of-type(n)	Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo.
Pseudo-classe strutturale	E:nth-last-of-type(n)	Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo, partendo dall'ultimo fratello.
Pseudo-classe strutturale	E:last-child	Seleziona ogni elemento E che è l'ultimo figlio del suo genitore.
Pseudo-classe strutturale	E:first-of-type	Seleziona ogni elemento E che è il primo fratello del suo tipo.
Pseudo-classe strutturale	E:last-of-type	Seleziona ogni elemento E che è l'ultimo fratello del suo tipo.
Pseudo-classe strutturale	E:only-child	Seleziona ogni elemento E che è l'unico figlio del suo genitore.
Pseudo-classe strutturale	E:only-of-type	Seleziona ogni elemento E che è il solo fratello del suo tipo.
Pseudo-classe strutturale	E:empty	Seleziona ogni elemento E che non ha figli (inclusi i nodi di testo).
Pseudo-classe di destinazione	E:target	Seleziona ogni elemento E che è la destinazione dell'URL di riferimento.
Pseudo-classe degli stati di un elemento della UI	E:enabled	Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è abilitato.
Pseudo-classe degli stati di un elemento della UI	E:disabled	Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è disabilitato.
Pseudo-classe degli stati di un elemento della UI	E:checked	Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è selezionato.
Pseudo-elemento dei frammenti di un elemento della UI	E::selection	Seleziona la parte di un elemento E attualmente selezionata o sottolineata dall'utente.
Pseudo-classe di negazione	E:not(s)	Seleziona ogni elemento E a cui non corrisponde il selettore semplice s.
Combinatore del fratello generico	E ~ F	Seleziona ogni elemento F che è preceduto da un elemento E.

Selettori di attributo che selezionano una sottostringa

I seguenti selettori di attributo sono particolarmente utili nella gestione dei collegamenti ipertestuali. Esempio:

a[href^="http://"] { background: #fff; border: 1px solid; padding: 4px; color: #000; }

Qui andiamo a selezionare i collegamenti che puntano ad un sito esterno, ovvero quelli il cui attributo href inizia con la sottostringa "http://". Vediamo un altro esempio:

a[href$=".css"] { font: 1em "SFProverbialGothic"; color: #000; border-bottom: 1px dashed; text-decoration: none; }

In questo caso selezioniamo tutti i collegamenti che puntano ad un file CSS, ovvero quelli il cui attributo href termina con la sottostringa ".css".

Per concludere la nostra panoramica sui selettori CSS, vi proponiamo un ulteriore esempio

a[href*="luna"] { padding-right: 10px; background: transparent url("img/luna.gif") no-repeat 100% 100%; }

In quest'ultimo caso selezioniamo quei collegamenti che puntano ad un sito o sottosito della galassia "luna", ossia quelli il cui attributo href contiene la sottostringa "luna".

I selettori di attributo che selezionano una sottostringa non sono supportati da nessuna versione di Internet Explorer. Sono invece supportati da Opera 9+, Firefox 1.5+. Inoltre aggiungiamo pure che IE 8, relativamente a :focus, :first-child, :before e :after ha bisogno della dichiarazione !DOCTYPE, se ci si dimentica addio supporto.

Le pseudo-classi strutturali

Le pseudo-classi strutturali permettono di selezionare gli elementi all’interno della pagina in base a delle informazioni dell’oggetto che non possono essere raggiunte da selettori semplici o combinatori. Cerchiamo di capire in che modo operano: dato un qualsiasi oggetto all’interno del DOM, se quest'ultimo contiene degli elementi figli, l’indice dei figli, contrariamente ai linguaggi di programmazione, inizia da 1 e non da 0.