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.

 

  • Item 1 (1)
  • Item 2(2)
  • Item 3 (3)
  • Item 4 (4)
  • Item 5 (5)

Chiarito ció, passiamo ad analizzare una per una le pseudo classi strutturali, verificandone la compatibilità con i browser.

  • E:root
  • E:nth-child()
  • E:nth-last-child()
  • E:last-child
  • E:only-child
  • E:nth-of-type()
  • E:nth-last-of-type()
  • E:first-of-type
  • E:last-of-type
  • E:only-of-type
  • E:empty
 
by admin admin Date: 11-04-2013 visite : 2000