Conosci questi modi di utilizzo dei selettori css? (Parte 2)

Dopo aver introdotto i selettori di base presenti nelle specifiche CSS, ed averne testato la potenza, forse ti sarai chiesto: “Che bisogno c’é di altri selettori? Posso fare tutto con class e ID!”.

Non c’è niente di più professionale di riuscire ad utilizzare in modo appropriato le regole css evitando di dichiararne un numero spropositato. In questo modo oltre a migliorare la qualità del tuo codice si ottimizzano i tempi di caricamento delle tue pagine. Vuoi sapere come?

L’uso del selettore universale

Questo selettore molto potente, rappresentato da un asterisco ( * ), può essere letto come “Tutti gli elementi“. Spesso viene utilizzato per “resettare” il margine e il padding di tutti gli elementi:

* {
margin: 0;
padding: 0;
}

Questa dichiarazione equivale a scrivere tutti gli elementi HTML uno dopo l’altro, assegnadogli margini e padding nulli.

Molto più di frequente il selettore universale è sottinteso; infatti tutte le dichiarazioni di ID o classe utilizzate nei CSS:

#about { ..regole..}
.post { ..regole }

sono equivalenti a:

*#about { ..regole..}
*.post {..regole..}

Attribute Selectors (selettori di attributo)

I selettori di attributo, come suggerisce il nome, permettono di applicare degli stili ad elementi in base al nome dell’attributo o al suo valore. La specifica CSS 2.1 ne elenca quattro tipi diversi: selezione per la presenza di un attributo, per il valore di un attributo, per il valore di un attributo da un elenco di parole, e per attributo che inizia con una parola seguita eventualmente da un trattino. Andiamo ad esaminarli uno per uno.

Selezione della presenza dell’attributo – elemento[attributo]

Grazie a questo tipo di selettore è possibile applicare degli stili ad un elemento che ha definito un determinato attributo, indipendentemente dal suo valore. Ad esempio la regola:

img[alt] {
border:5px solid red;
}

va letta come “Seleziona tutti gli elementi <img> che hanno l’attributo alt impostato ed applica un bordo rosso spesso 5 pixel”.

Se applico la regola precedente al seguente markup:

<img width="80" height="80" alt="Una immagine" src="mia_immagine1.jpg"/>
<img width="80" height="80" alt="Seconda immagine" src="mia_immagine2.jpg"/>
<img width="80" height="80" alt="" src="mia_immagine3.jpg"/>
<img width="80" height="80"  src="mia_immagine4.jpg"/>

il bordo rosso verrà applicato solo ai primi tre elementi, poiché hanno un attributo alt impostato (anche se quello della terza immagine è vuoto), mentre l’ultima immagine sarà “sbordata”.

Questo tipo di selettore è utile per creare consistenza nella navigazione del sito: infatti una volta creata questa regola dell’esempio, un ipotetico utente si aspetterà sempre un bordo rosso intorno alle immagini con descrizione alternativa. Potresti quindi pensare delle rappresentazioni specifiche per gli elementi con un attributo title definito, altre per gli elementi con attributo <code>lang</code> e così via.

Questo tipo di regola può essere utilizzato per eseguire un debugging del sito in fase di sviluppo: infatti è un modo semplice e rapido per sapere a quali immagini è stato applicato l’elemento alt.

Selezione di un valore di attributo – elemento[attributo=”valore”]

Questo selettore permette di applicare gli stili a tutti gli elementi che hanno definito un attributo con un valore esatto.

Quindi, la regola:

input[type="text"]{
background-color: yellow;
}

deve essere letta come “Seleziona tutti gli elementi input con l’attributo type esattamente pari a text e applica uno sfondo giallo”.

Ci sono diversi casi in cui puoi voler utilizzare questo selettore. Uno è quello che ho mostrato nell’esempio, ovvero quello di selezionare i vari elementi di un form, in modo da rendere uniforme il loro aspetto per tutto il sito.

Selezione di un valore di attributo da un elenco – elemento[attributo~=”valore”]

Questo tipo di selettore ci permette di selezionare degli elementi con un attributo il cui valore è una lista di parola separati da spazi. Detto così può sembrare scoraggiante. In pratica, se definisco una regola:

p[class~="evidenziato"] {
line-height:1.2;
}

sto dicendo di “Selezionare tutti i paragrafi con un attributo class che contiene la parola evidenziato”. Non è importante dove la parola evidenziato sia posta, l’importante è che sia presente nell’elenco di valori dell’attributo. Lo scenario che ti si potrebbe presentare è il seguente:

<p class="evidenziato introduzione">Questa è la mia introduzione che deve essere evidenziata..</p>
<p class="postscriptum evidenziato">Questo è un post scriptum e deve essere evidenziato..</p>
<p class="articolo editoriale evidenziato">Questo invece è un editoriale e deve essere evidenziato..</p>

Tutti i paragrafi verranno selezionati dalla regola precedente, perché il loro attributo class contiene la parola evidenziato da qualche parte. Ma quando può essere utile un tale selettore?

Un utilizzo potrebbe essere quello di rendere in modo particolare i link a cui è applicato un attributo “rel”. Riprendo dal sito del W3C:

“Questo attributo descrive la relazione dal documento corrente verso l’ancora specificata dall’attributo href. Il valore di questo attributo è un elenco separato da spazi di tipi di collegamento.”

In pratica con questo attributo possiamo specificare che relazione c’è tra la nostra pagina e quella che abbiamo linkato. Oltre ai valori predefiniti dalle specifiche (che consentono di specificare se il link rimanda, ad esempio, ad un indice del sito, o ad un glossario), si possono utilizzare gli attributi definiti in XFN^TM (XHTML Friends Network), che consentono di specificare le relazioni personali che si hanno con i “possessori” del sito web a cui punta il collegamento. Ad esempio è abbastanza frequente trovare in un blog un elenco di siti “amici”, il cosiddetto Blogroll. Nel mio si potrebbe trovare:

<a href="https://valy.esempio.it" rel="sweetheart met">Valy's Blog</a>
<a href="https://nando.esempio.it" rel="friend co-worker">Nando</a>
...

Potrei voler visualizzare in rosso l’elemento con attributo ‘sweetheart’ (che dovrebbe essere unico), e visualizzare l’icona di un cellulare accanto i miei contatti di lavoro:

a[rel~="sweetheart"]{
color:red;
}
a[rel~="co-worker"]{
padding-left:18px;
background:#FFF url(work.png) center left no-repeat;
}

In questo modo (dire che il markup è semantico).

Per ulteriori spiegazioni ed esempi, puoi visitare il sito ufficiale del progetto XFN.

Selezione di un valore di attributo con parola seguita da trattino – elemento[attributo|=”valore”]

Questo è uno dei selettori forse meno usati (insieme alla pseudo-class :lang), però il suo utilizzo può essere interessante. In pratica seleziona tutti gli elementi il cui attributo inizia per una parola o la stessa parola seguita da un trattino ( – ).

L’introduzione di un selettore di questo tipo può sembrarti una scelta abbastanza strana, ma l’utilizzo principale è quello di selezionare i link in cui è stato definito l’attributo hreflang.

Questo attributo, che può essere usato solo se è definito l’attributo href, serve a specificare la lingua del sito a cui ci si collega. Ad esempio, se al seguente markup:

<a href="https://sito-americano.esempio.com" hreflang="en-US">Sito americano</a>
<a href="https://sito-inglese.esempio.com" hreflang="en">Sito americano</a>
<a href="https://sito.esempio.it">Sito di esempio</a>

viene applicata la regola:

a[hreflang|="en"]{
color:yellow;
}

renderà i primi due link di colore giallo, perchè è stato definito l’attributo hreflang, ed in entrambi i casi inizia per en, oppure per en- .

So che forse starai pensando che l’utilità di questo selettore è limitata, dato che l’attributo hreflang è poco diffuso, però ci sono anche altri scenari d’uso.

Ad esempio, si potrebbe decidere che i nomi di tutte le classi che si riferiscono ad immagini debbano iniziare per “img-“. In questo caso potrei selezionare tutte queste classi utilizzando la regola:

img[class|="img"]{
..qui le mie dichiarazioni CSS per le classi che iniziano con img o img-..
}

Pseudo-classi e pseudo-elementi

Grazie a questi selettori è possibile assegnare stili agli elementi solo quando è verificata una ben definita condizione oppure quando l‘elemento è in una determinata posizione all’interno del documento. Tutte le pseudo-classi e gli pseudo-elementi cominciano con i due punti ( : ) e possono essere preceduti da un selettore di elemento.

L’unica regola che devi conoscere per utilizzarli correttamente è che essi devono sempre terminare la dichiarazione del selettore, in questo modo:

:link {...regole..} /*corretto*/
a:link {...regole...} /*corretto*/
#header p:first-child {...regole...} /*corretto*/
p:first-line em {..regole...} /* errato*/

Al di là di questa regola restrittiva, pseudo-classi e pseudo-elementi sono selettori come tutti gli altri, quindi possono essere combinati con selettori discendenti, di figlio, adiacenti o anche con altre pseudo-classi o pseudo-elementi.

Andiamo dunque ad esaminarli più nello specifico!

Pseudo-classi :link e :visited

Se navighi spesso in Internet saprai che tutti i browser di default rendono il testo dei link in blu sottolineato. E che, una volta visitato il link, questo diviene di colore viola (urghh!).

Queste regole di base, che in qualche modo derivano dal primo browser grafico “Mosaic”, chiaramente non sono consistenti con l’aspetto di tutti i siti web (se lo fossero si dovrebbe ricorrere urgentemente ad un web-designer professionista). Se hai uno sfondo scuro potresti voler rendere i link in bianco ed eliminare la sottolineatura, e barrare quelli visitati o altro. Ecco quindi che in tuo aiuto intervengono le pseudo-classi :link e :visited.

La pseudo classe :link si applica a tutti i link non ancora visitati:

a:link {
text-decoration:none;
font-weight:bold;
}

Con questa regola ho eliminato la sottolineatura ai link, e ho reso il testo in grassetto.

La pseudo-classe :visited invece si applica a tutti i link che sono già stati visitati con quel browser:

a:visited {
text-decoration:line-through; /*barra i link visitati*/
}

Potrei anche rendere uguali i link visitati e non visitati, così da evitare modifiche dopo la visita, come nell’esempio seguente:

a:link , a:visited{
text-decoration:none;
color: black;
font-weight:bold;
}

Con questa tecnica si riduce però l’usabilità della pagina, in quanto un utente non riesce a distinguere a colpo d’occhio quali link ha già visitato e quali no.

Pseudo-classi :active, :hover e :focus

Passiamo adesso ad esaminare le pseudo-classi “dinamiche”. Vengono chiamate così perché gli stili applicati tramite questi selettori diventano visibili solo durante alcune azioni particolari dell’utente:

• :hover => l’utente passa con il puntatore del mouse sopra l’area dell’elemento;
• :active => il pulsante del mouse è tenuto premuto sull’elemento;
• :focus => si applica ad un elemento su cui l’utente ha cliccato col mouse oppure è stato selezionato attraverso la tastiera (tasti TAB o shift+TAB);

È importante notare che queste pseudo-classi non si applicano solo ai link (come ritengono in molti), bensì ad ogni elemento. Potrei quindi voler evidenziare i paragrafi con uno sfondo giallino al passaggio del mouse:

p:hover {
background-color:#ffff99;
}

L’utilizzo più comune, però, è quello di applicare tali proprietà ai link. Molti siti prevedono stili diversi per i link non visitati, visitati, al passaggio del mouse, al clic del mouse o quando vengono selezionati attraverso la tastiera. Le regole da applicare in questo caso sono:

a:link    { color: red }                            /* Link non visitati */
a:visited { color: blue }                         /* Link visitati   */
a:hover   { color: yellow }                     /* Passaggio del mouse*/
a:active  { color: lime }                        /* Clic del mouse    */
a:focus   { background-color: #ACE;}     /* Focus con la tastiera */

L’ordine in questo caso è molto importante, per via di una proprietà dei CSS chiamata “La Cascata”, di cui parleremo in un prossimo articolo. Molti per ricordarlo utilizzano delle frasi particolari,dove le maiuscole sono relative all’iniziale della pseudo-classe: in inglese spesso si utilizza la frase “LoVe HAte” (amore-odio).

In redazione abbiamo cercato di trovare una frase che rendesse l’idea anche in italiano, ma dopo vari tentativi (LaVa HAsciuga, La Vacanza? Hotel o Albergo, Le Vie Hanno Asfalto, Leonardo Venditti Ha Artrosi) abbiamo convenuto che forse sarebbe stato meglio lasciare spazio all’originale in lingua.

Pseudo-classe :first-child

Questa pseudo-classe è davvero molto interessante (insieme alla sua controparte :last-child di cui parleremo in un prossimo articolo sui selettori CSS3): seleziona un elemento solo quando è il primo figlio dell’elemento padre (hai letto l’articolo precedente?).

p:first-child {
color: blue;
}

La sintassi in questo caso può essere un po’ fuorviante: infatti questo selettore va letto come “Rendi blu il testo di ogni paragrafo che è primo figlio del genitore” e non come “Seleziona il primo figlio dei paragrafi e rendi il testo blu”. Dunque se applicato a questo markup:

<div>
<p>La pizza è molto semplice da preparare, ma poche persone possono vantarsi di cucinare la vera pizza napoletana.</p>
</div>
<div id="ricetta">
<h2>Preparare la pizza</h2>
<p>Come vedete, davvero poco! Ecco i <strong>semplici</strong> passi per preparare una pizza semplice:</p>
</div>

soltanto il primo paragrafo verrà reso in blu, poichè il primo figlio del div “ricetta” è il titolo di secondo livello <h2> e non il paragrafo. Inoltre non verrà reso blu l’elemento strong poichè è il primo figlio del paragrafo, chiaro?

Pseudo-classe :lang(lingua)

La pseudo-classe :lang è una delle meno utilizzate, come detto in precedenza, ma suppongo che in futuro avrà una diffusione sempre maggiore. In pratica seleziona tutti gli elementi che sono scritti in una determinata lingua. Come possono i CSS determinare questa lingua? Semplice, analizzano il documento cercando tutti gli elementi con un attributo lang definito, e controllano se la lingua specificata è la stessa di quella fissata nel foglio di stile.

Prendiamo come esempio uno stralcio dalla poesia “O Captain! My Captain!” di Walt Whitman (chiaramente in inglese):

<blockquote lang="en">
<pre>
<pre>Here Captain! dear father!
This arm beneath your head;
It is some dream that on the deck,
You've fallen cold and dead.
</pre>
</blockquote>

Se volessi rendere corsivo il testo di tutte le citazioni in inglese non avrei che da scrivere:

blockquote:lang(en) {
font-style:italic;
}

Pseudo-elementi :first-line, :first-letter

Il significato di questi selettori è molto semplice: permettono di selezionare la prima riga o la prima lettera di un elemento. L’introduzione di questi selettori deriva da alcuni metodi molto comuni in tipografia:

:first-letter viene usato per simulare l’effetto “drop-cap” ovvero la prima lettera del primo paragrafo viene resa con uno stile diverso dal resto del paragrafo (come facevano i miniaturisti nel Medioevo).

Ad esempio, potrei aumentarne le dimensioni e cambiarne il colore:

p:first-letter{
font: bold 65px Georgia, "Times New Roman", Times, serif;
color:#003366;
}

:first-line, invece, viene spesso utilizzato per rendere di dimensioni maggiori il testo della prima riga di testo, come accade su molti quotidiani:

p:first-line{
font-size:120%;
}

Naturalmente il concetto di “prima riga” è relativo: su un monitor con una risoluzione 800×600 la prima riga del paragrafo conterrà ovviamente meno parole rispetto a quelle presenti su un monitor Widescreen. Quindi se si cerca un sito uguale pixel per pixel sempre e comunque (cosa comunque impossibile) forse sarebbe meglio non utilizzare questo selettore.

A questo punto è opportuno precisare che da poco tempo (ovvero dall’introduzione di IE8) c’è stato il pieno supporto da parte dei browser più diffusi per i selettori 2.1 (In questa pagina puoi trovare una visione d’insieme sui vari selettori).

Questo ha portato alla diffusione di vari hack per sopperire al mancato supporto, e quindi all’uso limitato di questi selettori. Per questo ritengo che ogni professionista,  ora che ne ha la reale possibilità, debba cercare di migliorare i propri lavori, utilizzando tutti i selettori a disposizione ed evitando di rifugiarsi dietro il classico “Ma il browser X non lo supporta”.

Esercizi

Come nel precedente articolo, ti presento una serie di esercizi che possono aiutarti a prendere confidenza con gli argomenti trattati in questo articolo. Naturalmente sei invitato a sperimentare al di là delle richieste, e magari puoi condividere le tue scoperte nei commenti di questo articolo.

1. Rendere rosse tutte le ancore con attributo rel
2. Applicare un bordo alle ancore con un attributo rel pari a ‘bookmark’
3. Rendere tutti i link con attributo rel pari a ‘met’ (tra gli altri) in grassetto
4. Rendere tutti i discendenti dei paragrafi in blu
5. Applicare uno sfondo giallo a tutti gli elementi con attributo name
6. Rendere di colore verde tutti gli elementi il cui attributo title contiene la parola ‘questo’
7. Rendere i link discendenti di una lista ul di colore in nero senza sottolineatura (sia visitati che non visitati). Al passaggio del mouse oppure al focus della tastiera i link dovranno diventare di colore bianco su sfondo nero
8. Rendere la prima lettera di ogni elemento con un attributo class in grassetto giallo

Puoi risolvere gli esercizi utilizzando solo i CSS, oppure applicarli alla seguente pagina d’esempio:

<html>
<head>
<title>La pizza napoletana</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<style type="text/css">

</style>
</head>
<body>
<div id="introduzione">
<h1 class="evidenziato">La pizza napoletana</h1>
<p>La pizza è molto semplice da preparare, ma poche persone possono vantarsi di cucinare la vera pizza napoletana.</p>
<p>Questa tradizione si tramanda di generazione in generazione, e come era solita dire mia nonna: <q cite="https://nonnamaria.esempio.it" lang="it">La pizza è un'arte, e non si può imparare dai libri</q></p>
</div>
<div>
<h2>Preparare la pizza</h2>
<h3>Ingredienti</h3>
<ul>
<li>Acqua tiepida</li>
<li>Farina</li>
<li>Lievito</li>
<li>Sale</li>
<li>Basilico</li>
<li><strong>Tanto amore</strong> :)</li>
</ul>
<p class="evidenziato">Come vedete, davvero poco! Ecco i <strong>semplici</strong> passi per preparare una pizza semplice:</p>
<ol>
<li>Disporre la farina a fontana nel recipiente, unire il lievito un bicchiere di acqua tiepida.</li>
<li>Appena sciolto il lievito aggiungere un cucchiaio di olio e impastare energicamente.</li>
<li>Se l'impasto si presenta molle aggiungere altra farina; se , al contrario , si presenta molto duro aggiungere altra acqua e impastare nuovamente.</li>
<li>Il panetto dovrà apparire liscio e uniforme. Aspettare che avvenga la lievitazione.</li>
</ol>
</div>
<div id="sidebar">
<h3>Link utili</h3>
<ul>
<li><a href="https://pizza.esempio.it" rel="bookmark" title="Magari questo sito esistesse">Sito ufficiale della pizza</a></li>
<li><a href="https://nonnamaria.esempio.it" rel="kin met" title="Questo è il sito di Nonna Maria">Sito di Nonna Maria</a></li>
</div>
<h2>Commenta questo articolo</h2>
<form action="#" method="post" id="commentform">
<p><label for="autore">Nome</label> <input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<small>(obbligatorio)</small></p>
<p><label for="email">Email</label> <input type="text" name="email" id="email" value="" size="22" tabindex="2" />
<small>(obbligatorio)</small></p>
<p><label for="url">Sito Web</label> <input type="text" name="url" id="url" value="" size="22" tabindex="3" /></p>
<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Invia Commento" /></p>
</form>
</body>
</html>

Soluzioni esercizi articolo precedente

Al termine del precedente articolo ho lasciato una serie di quiz per aiutarti a familiarizzare con i vari selettori presentati. Non li hai svolti? Ti sono sembrati troppo difficili? Qui puoi trovare le soluzioni commentate.

Gli altri articoli di questa guida:

1. I selettori – concetti base
2. I selettori – concetti avanzati
3. I selettori – :before e :after
4. I selettori – il futuro