Chargement...

Sélecteurs d’attribut CSS

Jusqu’ici, vous trouviez l’élément par nom de balise, class, id et relations dans l’arbre. Parfois, le HTML dit déjà la vérité : ce lien a un target, ce champ est type="email", l’adresse commence par https. Le sélecteur d’attribut lit cette vérité — sans inventer une nouvelle class pour chaque cas.

Qu’est-ce qu’un sélecteur d’attribut ?

Un sélecteur d’attribut trouve les éléments qui ont un attribut HTML donné. Vous pouvez vérifier seulement la « présence », ou mesurer la valeur avec exactitude ou en partie. Le nom de l’attribut va entre crochets : [attr].

Cinq modèles du quotidien

Avec ceux-ci, vous couvrez presque tout le travail habituel sur les attributs.

📊 Opérateurs du sélecteur d’attribut

Modèle Sens simple Exemple
[attr] Cet attribut est là (n’importe quelle valeur) a[target]
[attr="value"] La valeur est exactement celle-ci input[type="email"]
[attr^="value"] La valeur commence par ce texte a[href^="https"]
[attr$="value"] La valeur se termine par ce texte a[href$=".pdf"]
[attr*="value"] Ce texte apparaît quelque part dans la valeur a[href*="docs"]

Présence seule — [attr]

Quand vous mettez seulement le nom entre crochets, cela veut dire : « qu’il ait cet attribut. » La valeur n’importe pas.

Présence — liens qui ouvrent un nouvel onglet

css
CSS Code 
a[target] {
font-weight: 600;
}

Quand est-ce utile ?

Drapeaux optionnels en HTML : un lien avec target, ou un élément qui porte data-state — même avant de filtrer sa valeur.

Valeur exacte — [attr="value"]

Le = dit que la valeur doit être lettre pour lettre la même. Mettez en général la valeur entre guillemets ; plus clair et plus sûr.

Valeur exacte — champ e-mail

css
CSS Code 
input[type="email"] {
border: 1px solid #0f766e;
}

Créer une class ou utiliser type ?

Si le HTML porte déjà type="email", écrivez-le dans le sélecteur. Une nouvelle class (comme .email-field) sert quand le même aspect doit aussi s’appliquer à quelque chose sans cet attribut.

Début de la valeur — ^=

^= signifie que la valeur de l’attribut commence par ce texte. Très pratique pour les adresses sécurisées ou un préfixe commun.

Commence par — liens https

css
CSS Code 
a[href^="https"] {
color: #0f766e;
}

Fin de la valeur — $=

$= signifie que la valeur se termine par ce texte. Idéal pour l’extension de fichier dans href ou src.

Se termine par — lien PDF

css
CSS Code 
a[href$=".pdf"] {
font-style: italic;
}

Quelque part dans la valeur — *=

*= dit : ce texte apparaît n’importe où dans la valeur. Puissant, mais trop généreux vite. Si vous connaissez le début ou la fin, ^= ou $= sont souvent plus propres.

Contient — chemin docs dans l’adresse

css
CSS Code 
a[href*="docs"] {
text-decoration: underline;
}

Bonnes habitudes

  • Mettez la valeur du sélecteur entre guillemets : type="email"
  • Si la page est chargée, ajoutez aussi le nom de balise : input[type="search"] se lit mieux que [type="search"] seul
  • Respectez l’orthographe et la casse comme dans le HTML
  • Ne remplacez pas chaque class par un attribut ; allez à l’attribut quand le markup porte déjà ce fait

Essayez vous-même

  1. Trois liens : un https://…, un qui finit par .pdf, un avec docs dans le chemin ; plus <input type="email"> et <input type="text">.
  2. Ajoutez a[href^="https"] { color: #0f766e; } — seul le lien sécurisé change de couleur.
  3. a[href$=".pdf"] { font-style: italic; } — le lien PDF devient italique.
  4. input[type="email"] { border-color: #0f766e; } — seul le champ e-mail prend la bordure.
  5. Optionnel : essayez a[href*="docs"] ; il peut attraper plus de liens qu’un préfixe/suffixe strict.

Erreurs fréquentes

  • [type=email] sans guillemets alors que les guillemets sont plus clairs et sûrs
  • *= à la place de ^= — « contient » prend aussi le milieu et des liens en trop s’allument
  • Utiliser [class] au lieu de .name pour l’apparence courante
  • Oublier que = veut toute la valeur — type="text" n’est pas type="textbox"
  • Mélanger les noms d’attributs — hreflang n’est pas href

Résumé

  • Le sélecteur d’attribut travaille avec [ ] sur les attributs HTML
  • Nom seul = présence ; = = valeur exacte
  • ^= début, $= fin, *= n’importe où dans la valeur
  • Choisissez l’opérateur le plus étroit qui dit encore votre intention
  • Au besoin, collez aussi le nom de balise au sélecteur
  • Entraînez-vous sur de vrais href et type, puis rechargez la page

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel