Analisi progettuale delle pseudo-classi CSS
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.
Le pseudo-classi consentono di inserire uno stile basato sulle relazioni tra gli elementi, in particolare esse definiscono lo stato di un elemento.
Molte di loro si inseriscono in tre categorie: pseudo-classi dinamiche, strutturali e di interfaccia utente. Diversamente dagli pseudo-elementi, più pseudo-classi possono essere applicate a un solo selettore per renderlo ancora più specifico.
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.
Le pseudo-classi strutturali
Le pseudo-classi strutturali sono uno strumento che consente di selezionare gli elementi all'interno della pagina in base a delle informazioni sull'oggetto che non possono essere raggiunte da selettori semplici o combinatori.
Sintatticamente vengono definite come quelle previste nelle precedenti specifiche: una pseudo-classe si definisce attraverso il segno : seguito dal nome della pseudo-classe.
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}
Prima di analizzare ogni pseudo-classe, facciamo una precisazione necessaria alla corretta comprensione dell'argomento. Partendo da un qualsiasi oggetto all'interno del DOM, se questo contiene degli elementi figli, l'indice dei figli, contrariamente ai linguaggi di programmazione, inizia da 1 e non da 0.
Esempio :
<ul> <li>Elemento Lista 1</li> (Posizione 1) <li>Elemento Lista 2</li> (Posizione 2) <li>Elemento Lista 3</li> (Posizione 3) <li>Elemento Lista 4</li> (Posizione 4) <li>Elemento Lista 5</li> (Posizione 5) </ul>
La tabella che segue ci offre uno sguardo d'insieme dei nuovi selettori disponibili nei 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".
Come prima accennato, 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.
Nella seconda parte dell'articolo, ne vedremo il funzionamento nei dettagli.
Technology vector created by pikisuperstar - www.freepik.com