Présence et valeurs exactes

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

Dans cette leçon, vous découvrirez les sélecteurs de présence d'attribut et de valeur exacte. Les sélecteurs d'attributs sont utilisés pour sélectionner des éléments en fonction de la présence ou de l'absence d'un attribut, ou de la valeur exacte d'un attribut.

Sélecteur de présence d'attribut :

Le sélecteur de présence d'attribut cible les éléments qui possèdent un attribut spécifique, quelle que soit sa valeur. Il est représenté par l'utilisation de crochets contenant le nom de l'attribut.

Exemple :

/* Selects all elements with a "target" attribute */
[target] {
   color: blue;
}

Sélecteur de valeur exacte :

Le sélecteur de valeur exacte cible les éléments ayant un attribut spécifique et une valeur d'attribut spécifique. Il est représenté par l'utilisation de crochets contenant le nom de l'attribut suivi d'un signe égal et de la valeur souhaitée.

Exemple :

/* Selects the element with "data-type" attribute having the value "important" */
[data-type="important"] {
   font-weight: bold;
}

Exemples de code :

HTML :

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS :

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

Ces exemples démontrent comment les sélecteurs d'attributs CSS fonctionnent en sélectionnant des éléments basés sur la présence ou la valeur exacte de leurs attributs et en leur appliquant les styles correspondants.

Défi

Facile

On vous a confié la tâche de styliser un formulaire HTML simple en utilisant des sélecteurs d'attributs.

Appliquez les styles suivants en utilisant des sélecteurs d'attributs :

Ajoutez une bordure green aux champs de saisie dont l'attribut type est défini sur "text".
Changez la couleur d'arrière-plan des champs de saisie dont l'attribut type est défini sur "email" en lightblue.
Définissez la couleur du texte des champs de saisie dont l'attribut type est défini sur "password" en red.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</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'attributsPrésence et valeurs exactesSélecteurs de valeur d'attribut Sé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