Come faccio ad aggiungere una piccola icona in modo da evidenziare tutti i link presenti in una pagina web? Ottenere questo risultato è molto semplice, servono poche righe di codice e lo strumento da utilizzare sono i selettori CSS. I selettori CSS si possono dividere in une grandi categorie. Una si occupa direttamente degli elementi definiti nel documento, come ad esempio P o HREF, generalmente definiti come i selettori DOM (Document Object Model), mentre l’altra lavora sugli pseudo-elementi come ad esempio la prima lettera di un paragrafo. In questo caso specifico utilizzeremo selettori della prima categoria. Tornando alla nostra domanda iniziale, se ad esempio vogliamo aggiungere automaticamente una icona sulla sinistra di ogni parola che contiene un link si deve utilizzare il selettore “^” che sta ad indicare che una certa stringa “inizia” con un certo valore.

a[href^="http"]{
    background: url("img_01.jpg") no-repeat left center;
    display: inline-block;
    padding-left: 25px;
}

Questo selettore CSS individua il valore specificato all’inizio dell’attributo ed esegue le istruzioni. Quindi tutti i link href delle mie pagine che iniziano con http verrano rappresentati da una piccola immagine sulla sinistra. La stringa HTML qui di seguito contiene un link href.

<p>Lorem <a href="http://www.google.it">ipsum dolor</a> sit amet, consectetur adipisci elit.</p>

Il risultato sulla pagina sarà questo qui sotto. L’immagine img_01.jpg richiamata nel CSS viene aggiunta al link testuale href perchè esegue l’istruzione presente all’interno di a[href^=”http”] {…}.

Alcuni dei selettori più utilizzati

• ^ = Valore attributo all’inizio della sottostringa
  a[href^=”mailto”]
• $ = Valore attributo alla fine della sottostringa
  a[href$=”PDF”]
• *= Valore attributo in un punto qualsiasi della sottostringa
  a[title*=”image”]