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

Nei precedenti articoli abbiamo introdotto i selettori CSS illustrandone vantaggi e metodologie di utilizzo.

Oggi concludiamo il nostro viaggio introducendo due pseudo-elementi che ti permetteranno di migliorare ulteriormente il markup dei tuoi documenti HTML.

Scopriamo insieme di cosa si tratta.

Pseudo-elementi :before e :after

Gli pseudo-elementi :before e :after, in combinazione con la regola content permettono di dare un tocco di vita alle nostre pagine: in pratica permettono di aggiungere testo prima o dopo un elemento direttamente tramite CSS, senza dover modificare il markup! E non solo, è possibile mostrare anche uno qualsiasi degli attributi dell’elemento che si sta selezionando.

L’uso di questi pseudo-elementi è simile agli altri che abbiamo già visto: basta farli seguire ad un qualsiasi selettore.

Vediamo un esempio:

p:before {
    content:"Questo è l'inizio di paragrafo -> ";
    color: red;
}

p:after {
    content:" <- Questa è la fine di un paragrafo";
    color:blue;
}

Queste due regole visualizzano le scritte definite nella regola content rispettivamente prima e dopo ogni paragrafo. L’utilizzo della regola content è molto semplice: basta inserire il testo desiderato racchiuso tra virgolette, oppure utilizzare uno qualsiasi dei codici Unicode.

Vuoi vedere un utilizzo pratico di queste regole?

Come aggiungere dei campi obbligatori in un form?

Ti sarà capitato sicuramente di commentare il post di qualche blog. E certamente avrai notato che alcuni campi del form sono obbligatori, a differenza di altri: questa particolarità è resa esplicita oppure viene spesso indicata con un asterisco ( * ).

Diamo un’occhiata a un semplice form che potrebbe trovarsi alla fine di un post:

<h2>Commenta questo articolo</h2>
    
<form action="#" method="post" id="commentform">
    
    <p><label for="autore">Nome</label> (Obbligatorio) 
    <input type="text" name="autore" id="autore" value="" size="22" tabindex="1" /></p>
    <p><label for="email">Email</label> (Obbligatorio) 
    <input type="text" name="email" id="email" value="" size="22" tabindex="2" /></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>

Come puoi notare, l’autore ha reso obbligatori i primi due campi, aggiungendo manualmente il testo “(Obbligatorio)”. Se decidesse di rendere obbligatorio anche il terzo campo, dovrebbe aggiungere il testo manualmente, e questo per tutti i form del suo sito.

Eliminando il testo presentazionale e utilizzando lo pseudo-elemento :after si può rendere più efficiente e significativo il codice.

Quindi il markup diventerebbe:

<h2>Commenta questo articolo</h2>

<form action="#" method="post" id="commentform">

    <p><label for="autore">Nome</label><input type="text" name="autore" id="autore" value="" size="22" tabindex="1" /></p>
    <p><label for="email">Email</label><input type="text" name="email" id="email" value="" size="22" tabindex="2" /></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>

mentre il CSS da applicare potrebbe essere:

label[for=autore]:after, label[for=email]:after {
    content:" (Obbligatorio) ";
    color:red;
    font-size:75%;
}

Questa regola può essere letta come “Seleziona gli elementi label con attributo for pari a ‘autore’ e ‘email’ e dopo aggiungi il testo ‘ (Obbligatorio) ‘, rendilo rosso e riducine la dimensione”. Qui puoi visualizzare l’esempio.

Vuoi vederne un’altra possibile applicazione?

Modificare le liste

Una richiesta molto diffusa nello sviluppo di siti è quella di poter modificare il modo in cui vengono resi gli elementi di una lista, ovvero come modificare il “pallino nero” che quasi tutti i browser rendono di default.

Ci sono diversi modi per raggiungere questo obiettivo: attraverso la regola CSS list-style-type, oppure aggiungendo un’immagine di background per gli elementi <li> posizionandola adeguatamente, o ancora utilizzando Javascript.

Se non hai grosse pretese stilistiche, puoi aggiungere anche il metodo seguente alla tua “cassetta degli attrezzi”. In pratica questo metodo consiste nell’eliminare lo stile di default delle liste, ed aggiungere, utilizzando lo pseudo-elemento :after, un carattere prima di ogni elemento <li>.

Scriviamo un markup di prova:

<ul>
    <li>Primo elemento della lista</li>
    <li>Ancora un elemento</li>
    <li>Questo è l'ultimo elemento</li>
    <li>Scherzavo, ma questo è davvero l'ultimo</li>
    <li>Oops dimenticavo di dire che quello di prima era il penultimo!!</li>
</ul>

Applichiamo quanto detto prima:

ul {
    list-style:none;
}

li:before {
    content:"\2665 020 ";
    color:red;
}

Ho quindi rimosso il classico bullet, ed inserito prima degli elementi della lista un cuore (sono un sentimentale) e uno spazio, utilizzando i rispettivi codici Unicode, ottenendo questo risultato.

Come sapere dove puntano i link quando stampiamo una pagina?

Quando un utente stampa una pagina web si trova di fronte ad un problema: come sapere dove puntano i vari link?

Infatti se nel browser è possibile cliccare per scoprire i collegamenti, sulla carta stampata questo diventa impraticabile. Attraverso lo pseudo-elemento :after è possibile, utilizzando un foglio di stile specifico per la stampa, mostrare il link, in modo da poterlo leggere.

Prendiamo un markup di esempio:

<p>
    Salve a tutti. Questo è un esempio del sito <a href="https://www.yourinspirationweb.com">Your Inspiration Web</a>. 
    Provate a cercarlo su <a href="https://www.google.it">Google</a>.
</p>

Un semplice paragrafo con due link. L’effetto che vogliamo ottenere in fase di stampa è il nome del link senza sottolineatura, seguito dall’URL tra parentesi. Ancora una volta ci vengono in aiuto :after e la regola content: infatti quest’ultima ci permette di visualizzare anche il valore di un attributo, utilizzando la sintassi content: attr(nome_attributo).

Vediamo subito come funziona:

a[href] {
    text-decoration:none;
}

a[href]:after {
    content: " (" attr(href)  ")";
}

Utilizzando i selettori di attributo abbiamo selezionato tutti gli elementi <a> con attributo href, e attraverso la regola content abbiamo inserito il valore dell’attributo href dopo il nome del link.

Prova a stampare l’esempio!

Soluzioni ed esercizi

Nell’articolo precedente ho lasciato una serie di esercizi. Se ti hanno impegnato in qualche modo, o non hai potuto risolverli, puoi dare un’occhiata alle soluzioni altrimenti puoi scaricarle sul tuo pc.

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