Sélecteurs de valeur d'attribut II

Leçon 14 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 se terminant par. Cette technique vous permet de cibler des éléments HTML en fonction des derniers caractères de la valeur de leurs attributs.

Syntaxe du sélecteur de valeur d'attribut se terminant par :

Pour cibler des éléments dont les valeurs d'attribut se terminent par une chaîne spécifique, vous 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 se terminent par "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

Dans les exemples de code fournis :

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

En conséquence, le bouton ayant la valeur d'attribut class "btn-tertiary" aura une couleur de fond corail clair.

Défi

Facile

On vous a donné une liste de pistes musicales sur une page web. Chaque piste est représentée par un élément <div> avec un attribut data-track indiquant son format (par exemple, "mp3", "wav", "flac"). Votre tâche consiste à styliser les pistes différemment en fonction de leur format en utilisant des sélecteurs de fin de valeur d'attribut.

Votre tâche CSS consiste à :

Donner un arrière-plan unique aux pistes dont la valeur de l'attribut data-track se termine par "mp3".
Donner un arrière-plan unique aux pistes dont la valeur de l'attribut data-track se termine par "wav".
Donner un arrière-plan unique aux pistes dont la valeur de l'attribut data-track se termine par "flac".

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>Music Tracks</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-track="a-mp3">Track 1 (MP3)</div>
    <div data-track="a-wav">Track 2 (WAV)</div>
    <div data-track="a-flac">Track 3 (FLAC)</div>
    <div data-track="b-mp3">Track 4 (MP3)</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'attributSé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