CSS3 il selettore “comincia con”

Loading

Nella versione 3 dei css sono stati introdotti dei nuovi selettori (ossia dei codici/caratteri in grado di selezionare elementi con determitate carattristiche).
 
Uno dei nuovi è il selettore cappuccio (^), che ci consente di porre la nostra attenzione su una gli elementi un cui attributo (ad esempio) comincia con una determinta stringa.
 
Ad esempio ci potrebbe interessare la selezione di tutti i link verso siti esterni, questo risultato lo potrmmo ottenere scrivendo qualcosa tipo:

a[href^="http://"] {
   background:url(img/external_link.png) no-repeat;
   padding-right:25px;
}

Questo codice aggiunge una particolare icona su tutti i link verso l’esterno, questa soluzione funziona solamente se si usano i collegamenti relativi per le pagine del nostro sito ed assoluti verso siti esterni, qualora non fosse così dovremmo utilizzare il selettore ^ in una maniera più articolata.

a[href^="http://"] {
   background:url(img/external_link.png) no-repeat;
   padding-right:25px;
}
a[href^="http://www.miosito.ext"] {
   background:none;
   padding-right:none;
}

In questo caso abbiamo prima assegnato l’icona a tutti i link poi l’abbiamo eliminata da quelli verso il nostro sito, notiamo che questa è la soluzione più semplice altrimenti avremmo dovuto creare una regola css per ogni sito esterno.