Sélecteurs de valeur d'attribut III

Leçon 15 sur 15 du cours Sélecteurs CSS de Coddy.

Dans cette leçon, nous allons explorer le concept des sélecteurs de valeur d'attribut contenant. Cette technique vous permet de cibler des éléments HTML selon que leurs valeurs d'attribut contiennent une sous-chaîne spécifique.

Syntaxe du sélecteur de valeur d'attribut contenant :

Pour cibler des éléments dont les valeurs d'attribut contiennent une chaîne spécifique, vous utilisez la syntaxe de sélecteur [attribute*="value"].

Exemples de code :

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 :

/* Sélectionne les éléments <div> dont les valeurs de l'attribut class contiennent "fruit" */
[class*="fruit"] {
   color: green;
}

Explication des exemples de code :

Dans les exemples de code fournis :

Cinq éléments <div> sont définis avec différentes valeurs d'attribut class.
La règle CSS [class*="fruit"] cible les éléments ayant une valeur d'attribut class contenant la sous-chaîne "fruit". Elle applique le style color: green; à ces éléments.

En conséquence, les éléments <div<strong>></strong> avec les attributs de classe "tag fruit" auront une couleur de texte verte.

Défi

Facile

Vous êtes chargé de styliser une liste de produits sur une page web. Chaque produit est représenté par un élément <div> avec un attribut data-tags indiquant ses étiquettes (par exemple, "electronics", "clothing", "accessories"). Votre objectif est de styliser les produits différemment en fonction de leurs étiquettes en utilisant des sélecteurs de valeur d'attribut.

Votre tâche CSS consiste à :

Donner une couleur d'arrière-plan unique aux produits dont l'attribut data-tags contient "electronics".
Donner une bordure unique aux produits dont l'attribut data-tags contient "clothing".
Donner une couleur d'arrière-plan unique aux produits dont l'attribut data-tags contient "accessories".

Essayez vous-même

<!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>

Toutes les leçons de Sélecteurs CSS

1Introduction aux sélecteurs CSS

Rôle des sélecteurs CSS Pourquoi sont-ils importants ?

4Sélecteurs d'attributs

Introduction aux sélecteurs d'attributs Présence et valeurs exactes Sélecteurs de valeur d'attribut Sélecteurs de valeur d'attribut IISélecteurs de valeur d'attribut III

2Sélecteurs simples

Sélecteurs de type Sélecteurs de classe Sélecteurs d'ID Sélecteurs universels

3Sélecteurs combinateurs

Sélecteur d'enfant Sélecteur de descendant Sélecteur de frère adjacent Sélecteur de frère général