Selettori di valori di attributo

Lezione 13 di 15 del corso Selettori CSS di Coddy.

In questa lezione approfondirai il concetto di selettori che iniziano con il valore di un attributo. Questa tecnica ti consente di selezionare gli elementi HTML in base ai caratteri iniziali dei valori dei loro attributi.

Sintassi dei selettori che iniziano con il valore di un attributo:

Per selezionare gli elementi con valori di attributo che iniziano 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 con valori dell'attributo class che iniziano con "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

Negli esempi di codice forniti:

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

Il risultato è che tutti e tre i pulsanti avranno uno sfondo grigio chiaro, poiché i valori dei loro attributi class iniziano con "btn-".

Sfida

Facile

Immagina di avere la seguente struttura HTML per un elenco di elementi. Il tuo obiettivo è applicare uno stile agli elementi dell’elenco con un valore specifico dell’attributo data-category che inizia con "fruit-". Applica un colore di sfondo univoco a questi elementi dell’elenco usando CSS.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Value Starting With Selector</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <ul>
        <li data-category="fruit-apple">Apple</li>
        <li data-category="vegetable-carrot">Carrot</li>
        <li data-category="fruit-banana">Banana</li>
        <li data-category="fruit-orange">Orange</li>
        <li data-category="grain-rice">Rice</li>
    </ul>
</body>
</html>

Tutte le lezioni di Selettori CSS

1Introduzione ai selettori CSS

Scopo dei selettori CSS Perché sono importanti?

4Selettori di attributo

Introduzione ai selettori di attributo Presenza e valori esattiSelettori di valori di attributoSelettori di valori di attributo II Selettori di valori di attributo III

2Selettori semplici

Selettori di tipo Selettori di classe Selettori ID Selettori universali

3Selettori combinatori

Selettore figlio Selettore discendente Selettore fratello adiacente Selettore fratello generale

Esercitati da solo: Playground Web