Selettori di valori di attributo III
Lezione 15 di 15 del corso Selettori CSS di Coddy.
In questa lezione esploreremo il concetto di selettori che verificano se il valore di un attributo contiene una determinata stringa. Questa tecnica consente di selezionare gli elementi HTML in base al fatto che i valori dei loro attributi contengano una specifica sottostringa.
Sintassi dei selettori che verificano il contenuto del valore di un attributo:
Per selezionare gli elementi i cui valori degli attributi contengono una determinata stringa, si usa la sintassi del selettore [attribute*="value"].
Esempi di codice:
HTML:
<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>CSS:
/* Seleziona gli elementi <div> i cui valori dell'attributo class contengono "fruit" */
[class*="fruit"] {
color: green;
}Spiegazione degli esempi di codice:
Negli esempi di codice forniti:
- Vengono definiti cinque elementi
<div>con diversi valori dell'attributo class. - La regola CSS
[class*="fruit"]seleziona gli elementi il cui valore dell'attributoclasscontiene la sottostringa "fruit". Applica a questi elementi lo stilecolor: green;.
Di conseguenza, gli elementi <div<strong>></strong> con l'attributo class "tag fruit" avranno il testo di colore verde.
Sfida
FacileDevi applicare uno stile a un elenco di prodotti su una pagina web. Ogni prodotto è rappresentato da un elemento <div> con un attributo data-tags che indica i suoi tag (ad esempio, "electronics", "clothing", "accessories"). Il tuo obiettivo è applicare stili diversi ai prodotti in base ai loro tag, usando selettori di attributo con valore contenente.
Il tuo compito CSS è:
- Assegna un colore di sfondo distintivo ai prodotti il cui attributo
data-tagscontiene "electronics". - Assegna un bordo distintivo ai prodotti il cui attributo
data-tagscontiene "clothing". - Assegna un colore di sfondo distintivo ai prodotti il cui attributo
data-tagscontiene "accessories".
Provalo tu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<div data-tags="electronics">Smartphone</div>
<div data-tags="clothing">T-Shirt</div>
<div data-tags="accessories">Sunglasses</div>
<div data-tags="electronics clothing">Headphones</div>
</body>
</html>
Tutte le lezioni di Selettori CSS
4Selettori di attributo
Introduzione ai selettori di attributoPresenza e valori esattiSelettori di valori di attributoSelettori di valori di attributo IISelettori di valori di attributo IIIEsercitati da solo: Playground Web