Il potere dei selettori CSS è stato a lungo sottostimato per via dello scarso supporto in alcuni browser. Con i nuovi selettori CSS3 e l'avvento di una nuova generazione di browser i selettori CSS tornano prepotentemente sulla scena dello sviluppo web. In particolare, i selettori di attributo CSS3 permettono ora di estendere la selezione di elementi alle sottostringhe presenti nei valori di attributo. Vediamone insieme i dettagli.
Selettore di sottostringa generico
Questo selettore ha la seguente sintassi:
elemento[attributo*="sottostringa"]
La sottostringa cercata può trovarsi in qualsiasi punto del valore di un attributo. Esempio:
<p class="evident note-a">...</p>
Questo elemento può essere selezionato in questo modo:
p[class*="-a"] {...}
Selettore di sottostringa dell'inizio della stringa
Questo selettore ha la seguente sintassi:
elemento[attributo^="sottostringa"]
La sottostringa cercata può trovarsi all'inizio del valore di un attributo. Esempio:
<a href="https://services.amazon.com">...</a>
Questo elemento può essere selezionato in questo modo:
a[href^="https"] {...}
Selettore di sottostringa della fine della stringa
Questo selettore ha la seguente sintassi:
elemento[attributo$="sottostringa"]
La sottostringa cercata può trovarsi alla fine del valore di un attributo. Esempio:
<img src="immagine.png" alt="Immagine" />
Questo elemento può essere selezionato in questo modo:
img[src$=".png"] {...}
Riepilogo
| Token | Significato |
|---|---|
| * | Qualsiasi parte del valore di un attributo. |
| ^ | Inizio del valore di un attributo. |
| $ | Fine del valore di un attributo. |