Nel vasto universo dello sviluppo web, conoscere a fondo gli strumenti offerti dai linguaggi come HTML e CSS è fondamentale per ogni sviluppatore web. Tra le molte funzionalità offerte da CSS, gli "attribute selectors" svolgono un ruolo cruciale, ma spesso sottovalutato. In questo articolo, esploreremo in dettaglio cosa sono gli attribute selectors, come funzionano e come possono essere utilizzati per migliorare la qualità e la manutenibilità del nostro codice CSS.
Gli attribute selectors: Che Cosa Sono?
Gli attribute selectors in CSS sono un meccanismo che permette agli sviluppatori web di selezionare elementi HTML in base agli attributi e ai loro valori. Questo significa che possiamo applicare stili a elementi specifici basandoci sui valori dei loro attributi. Vediamo ora le diverse forme che gli attribute selectors possono assumere e come vengono utilizzati.
[attr]
Identifica gli elementi che hanno un attributo con nome "attr".
<div data-info="content">Contenuto testuale</div>
<style>
div[data-info] {
color: blue;
}
</style>[attr=value]
Identifica gli elementi che hanno un attributo con nome "attr" il cui valore è esattamente "value".
<a href="#" target="_blank">Link</a>
<style>
a[target="_blank"] {
text-decoration: underline;
}
</style>[attr~=value]
Identifica gli elementi che hanno un attributo con nome "attr" il cui valore è una lista di parole separate da spazi, una delle quali è esattamente "value".
<div class="categories" data-tags="html css javascript">Articolo</div>
<style>
div[data-tags~="css"] {
background-color: lightgray;
}
</style>[attr|=value]
Identifica gli elementi che hanno un attributo con nome "attr" il cui valore può essere esattamente "value" o può iniziare con "value" seguito immediatamente da un trattino.
<span lang="en-us">Contenuto in lingua americana</span>
<style>
span[lang|="en"] {
font-weight: bold;
}
</style>[attr^=value]
Identifica gli elementi che hanno un attributo con nome "attr" il cui valore inizia per "value".
<input type="email" name="email" placeholder="Email">
<style>
input[name^="em"] {
border: 1px solid gray;
}
</style>[attr$=value]
Identifica gli elementi che hanno un attributo con nome "attr" il cui valore finisce per "value".
<img src="image.jpg" alt="Immagine">
<style>
img[src$=".jpg"] {
box-shadow: 0px 0px 5px black;
}
</style>[attr*=value]
Identifica gli elementi che hanno un attributo con nome "attr" il cui valore contiene almeno un'occorrenza di "value" all'interno della stringa.
<input type="text" id="username" name="username" placeholder="Username">
<style>
input[name*="user"] {
background-color: white;
}
</style>[attr operator value i]
Aggiungere una "i" (o "I") prima della chiusura fa sì che il valore venga confrontato senza distinguere tra maiuscole e minuscole (per i caratteri nell'intervallo ASCII).
<button type="button" data-action="submit">Conferma</button>
<style>
button[data-action="SUBMIT" i] {
font-weight: bold;
}
</style>[attr operator value s]
Aggiungere una "s" (o "S") prima della chiusura fa sì che il valore venga confrontato tenendo conto delle maiuscole e minuscole (per i caratteri nell'intervallo ASCII).
ATTENZIONE: questo attributo è supportato unicamente da Firefox, dunque ne è sconsigliato l'utilizzo.
<div class="tag" data-tag="CSS">Tag</div>
<style>
div[data-tag="CSS" s] {
color: green;
}
</style>Questi sono solo alcuni esempi di come gli attribute selectors possono essere utilizzati per selezionare e stilizzare elementi HTML in modo mirato e flessibile.
