CSS3 selettore comincia con: come usare [attributo^=”valore”]

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.

Selezionare i link

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;
}

Modificare i link

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.