Cours CSS / Sélecteurs de base : types, classes, ID et attributs

Les sélecteurs CSS identifient les éléments HTML auxquels une règle s'applique. Les sélecteurs de type correspondent aux noms de balises, les sélecteurs de classe correspondent à des étiquettes réutilisables, les sélecteurs d’ID correspondent à un identifiant, et les sélecteurs d’attribut correspondent aux attributs ou à leurs valeurs.

Comparez les sélecteurs avec le même HTML

Lisons le sélecteur en fonction des quatre éléments suivants : A et B sont des p et ont une classe notice, et B a également une classe urgent. C est un p sans classe, D est un div avec une classe notice. Les lettres A à D ne sont que des marques pour distinguer les objets dans la description et ne sont pas une syntaxe CSS.

<p id="opening" class="notice" data-tags="garden visit">A: Operating hours</p>
<p class="notice urgent">B: Rainy weather notice</p>
<p>C: What you need</p>
<div class="notice">D: Information box</div>

Lors de la lecture d'un sélecteur, assurez-vous que la condition concerne l'élément lui-même auquel le CSS sera appliqué. Les deux conditions dans p.notice se réfèrent au même élément. En revanche, l'espace dans p .notice signifie rechercher un autre élément dans p. Les règles qui changent la cible en fonction de l'espace peuvent être trouvées avec la structure dans le Combinateurs CSS et pseudo-classes.

Utilisez les sélecteurs de type et universels

p { color: #333; }
* { box-sizing: border-box; }

p sélectionne tous les éléments p. Il est simple de décorer la même balise en commun, mais pour décorer séparément les paragraphes de notification et de corps, des conditions supplémentaires comme la classe sont nécessaires. Le sélecteur universel * est une notation qui sélectionne tous les éléments. Il n'inclut pas automatiquement les pseudo-éléments.

Ici, box-sizing: border-box est un réglage auxiliaire qui calcule en incluant le padding et la bordure lors de la spécification de la largeur et de la hauteur. Vous pouvez faire cet exercice même si vous n'avez pas encore appris les tenants et aboutissants du calcul de taille. Utiliser un sélecteur universel ne signifie pas que vous devez changer toutes les couleurs de texte et les arrière-plans en même temps. Pensez à la conception des réglages communs et des éléments spécifiques.

Sélectionnez les classes et les identifiants

.notice { background-color: #e9f7ef; }
p.notice { border-left: 4px solid #087f5b; }
.notice.urgent { font-weight: bold; }
#opening { color: #087f5b; }

Une classe peut être réutilisée pour plusieurs éléments. class="notice urgent" en HTML est une liste de deux noms de classe séparés par des espaces, pas un seul nom notice urgent. En CSS, ajoutez un point devant pour sélectionner .notice ou .urgent. .notice.urgent ne s'applique qu'aux éléments ayant les deux noms.

Un ID doit être unique dans un document HTML. N’attribuez pas à dix éléments le même id="opening". Utilisez des classes pour le style réutilisable et des IDs pour l'identification unique ou les destinations de fragment. Les sélecteurs d'ID ont une spécificité plus élevée que les sélecteurs de classe, mais la spécificité est comparée dans le cadre de l'origine applicable, de l'importance et des conditions de couche ; ajouter des IDs de manière indiscriminée rend les conflits plus difficiles à gérer. Pour plus de détails, voir CSS Héritage, Spécificité et Cascade.

Dans l'exemple, nous colorions par ID pour montrer les différences entre les sujets. Si vous avez réellement besoin de la même couleur verte pour plusieurs avis, vous pouvez simplifier cela en ajoutant la couleur à la règle .notice. L’objectif est de sélectionner exactement les éléments voulus ; il n’est pas nécessaire d’employer tous les types de sélecteurs.

Faire correspondre les attributs et leurs valeurs

input[required] { border: 2px solid #087f5b; }
input[type="email"] { background-color: #fff4cc; }
[data-tags~="visit"] { outline: 1px dashed #777; }
a[href^="https://"] { color: #1d4ed8; }

Une adresse https:// peut pointer vers le même site, donc ce préfixe n'identifie pas les liens externes en soi. De même, [data-tags="visit"] correspond à la valeur entière de l'attribut et ne correspond pas à garden visit. Utilisez l'opérateur de comparaison approprié pour la condition souhaitée. Voir MDN : Sélecteurs d'attributs .

Exécutez l'exemple de sélecteur complet

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
* { box-sizing: border-box; }
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    p { color: #333; }
    .notice { background-color: #e9f7ef; padding: 12px; }
    p.notice { border-left: 4px solid #087f5b; }
    .notice.urgent { font-weight: bold; }
    #opening { color: #087f5b; }
    [data-tags~="visit"] { outline: 1px dashed #777; }
    a[href^="https://"] { color: #1d4ed8; }
    input[required] { border: 2px solid #087f5b; }
    input[type="email"] { background-color: #fff4cc; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p id="opening" class="notice" data-tags="garden visit">A: We open at 9am every day.</p>
  <p class="notice urgent">B: In case of rain, the outdoor program will be canceled.</p>
  <p>C: Bring a water bottle and comfortable shoes.</p>
  <div class="notice">D: This is an information box.</div>
  <p><a href="https://example.com/">E: External guidance link</a></p>
  <form>
    <label for="email">Email (required)</label>
    <input id="email" type="email" name="email" required>
    <button type="submit">Request information</button>
  </form>
</body>
</html>

Si vous enregistrez et ouvrez avec index.html, A, B et D auront un arrière-plan clair et un padding de 12px, et seuls A et B, qui correspondent à p.notice, auront une bordure à gauche. B a les deux classes et apparaît en gras. A porte l’ID opening et son texte est vert, et un contour en pointillés est également créé en raison de la valeur de l'attribut visit. C reste un paragraphe normal.

La bordure du champ de saisie de l'email devient épaisse sous la condition requise, et le fond devient jaune sous la condition de type. La fonction réelle de validation de saisie pour required est gérée par l'attribut HTML, et le CSS ne fait que changer l'apparence de la boîte de saisie. L'adresse de lien externe dans l'exemple est uniquement à des fins illustratives. Veuillez ne pas utiliser ceci comme lien de guide vers le service réel. La manière de sélectionner l'existence d'un attribut est différente de la manière de sélectionner le résultat de la vérification. CSS États du formulaire : Focus, Validation, désactivé, et lecture seule. compare les sélecteurs d'état required et error ensemble.

Changer les conditions et prédire le résultat

1. Essayez de changer p.notice en .notice pour élargir la cible de la bordure gauche. Le résultat attendu est que la bordure qui existait initialement uniquement dans A·B apparaisse également dans D. Après confirmation, revenez au sélecteur d'origine.
2. Changez la classe de B en class="urgent". B reste p, mais il perd la condition de notice, donc l'arrière-plan du guide, la bordure gauche et le texte en gras pour .notice.urgent disparaissent. Les sélecteurs complexes ne correspondent pas simplement à cause de la seule classe urgent.
3. Changez la valeur de data-tags de A en garden revisit. Comme le mot visit n’apparaît plus comme mot distinct, le contour en pointillé devrait disparaître. Assurez-vous de ne pas confondre visit et revisit en tant que sous-chaînes.

Pour chaque exercice, enregistrez le fichier puis actualisez pour vérifier et revenir aux valeurs d'origine. Si seul l'objet attendu ne change pas, comparez d'abord le nom de classe·id·propriété réel. Vous pouvez distinguer les erreurs de sélection des conflits de priorité en regardant dans les outils de développement si les règles correspondent aux éléments sélectionnés.