Sélecteurs de valeur d'attribut

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

Dans cette leçon, vous allez approfondir le concept des sélecteurs de valeur d'attribut commençant par. Cette technique vous permet de cibler des éléments HTML en fonction des premiers caractères de leurs valeurs d'attribut.

Syntaxe du sélecteur de valeur d'attribut commençant par :

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

Exemples de code :

HTML :

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

CSS :

/* Sélectionne les boutons dont les valeurs de l'attribut class commencent par "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

Dans les exemples de code fournis :

Trois boutons sont définis avec des valeurs d'attribut de classe différentes.
La règle CSS [class^="btn-"] cible les éléments ayant une valeur d'attribut class qui commence par "btn-". Elle applique le style background-color: lightgray; à ces boutons.

Le résultat est que les trois boutons auront une couleur d'arrière-plan gris clair, car les valeurs de leur attribut de classe commencent par "btn-".

Défi

Facile

Imaginez que vous ayez la structure HTML suivante pour une liste d'éléments. Votre objectif est de styliser les éléments de liste avec une valeur d'attribut "data-category" spécifique qui commence par "fruit-". Appliquez une couleur d'arrière-plan unique à ces éléments de liste en utilisant CSS.

Essayez vous-même

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

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 exactesSélecteurs de valeur d'attributSélecteurs de valeur d'attribut II Sé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