Selettori di valori di attributo II

In questa lezione esploreremo il concetto di selettori che individuano la fine del valore di un attributo. Questa tecnica ti consente di selezionare gli elementi HTML in base ai caratteri finali dei valori dei loro attributi.

Sintassi del selettore che individua la fine del valore di un attributo:

Per selezionare gli elementi con valori degli attributi che terminano con una stringa specifica, usa la sintassi del selettore [attribute$="value"].

Esempi di codice:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* Seleziona i pulsanti i cui valori dell'attributo class terminano con "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

Negli esempi di codice forniti:

• Sono definiti tre pulsanti con valori diversi per l'attributo class.
• La regola CSS [class$="-tertiary"] seleziona gli elementi con un valore dell'attributo class che termina con "-tertiary". Applica lo stile background-color: lightcoral; a questi pulsanti.

Di conseguenza, il pulsante con il valore dell'attributo class "btn-tertiary" avrà uno sfondo color corallo chiaro.