Sélecteurs d'attributs en CSS

Lucas D. - July 19, 2024

Syntaxe et utilisation

Les sélecteurs d'attributs en CSS vous permettent de cibler des éléments en fonction de leurs attributs. La syntaxe de base d'un sélecteur d'attributs se compose de crochets [] contenant le nom de l'attribut. Vous pouvez affiner la sélection en spécifiant la valeur de l'attribut ou en utilisant des opérateurs spéciaux.

Pour cibler un élément avec un attribut spécifique, utilisez cette syntaxe :

Conseil: Sélecteur d'attribut de base

[attribute] {
  /* Styles CSS */
}

Pour sélectionner tous les éléments <a> avec un attribut target, utilisez :

Conseil: Sélection des éléments `<a>` avec un attribut target

a[target] {
  /* Styles CSS */
}

Vous pouvez également cibler des éléments en fonction de la valeur d'un attribut. Pour ce faire, ajoutez un signe égal = et la valeur de l'attribut entre guillemets après le nom de l'attribut :

Conseil: Sélecteur d'attribut avec une valeur spécifique

[attribute="value"] {
  /* Styles CSS */
}

Pour sélectionner tous les éléments <img> avec une valeur d'attribut alt de "logo", utilisez :

Conseil: Sélection des éléments avec un attribut alt spécifique

img[alt="logo"] {
  /* Styles CSS */
}

Voici quelques sélecteurs d'attributs courants :

[class] : Sélectionne les éléments avec une classe.
[id] : Sélectionne les éléments avec un id.
[type] : Sélectionne les types d'entrée.
[disabled] : Sélectionne les éléments désactivés.
[required] : Sélectionne les éléments obligatoires.

Exemples d'utilisation de ces sélecteurs :

Conseil: Sélecteurs d'attributs spécifiques

/* Sélectionne tous les éléments input de type "text" */
input[type="text"] {
  /* Styles CSS */
}

/* Sélectionne tous les éléments avec un attribut "data-toggle" */
[data-toggle] {
  /* Styles CSS */
}

/* Sélectionne tous les éléments avec un "title" contenant "example" */
[title*="example"] {
  /* Styles CSS */
}

Les sélecteurs d'attributs vous offrent un moyen de sélectionner et de styler des parties spécifiques de votre page web en fonction de leurs attributs.

Types de sélecteurs d'attributs

Les sélecteurs d'attributs CSS se déclinent en plusieurs types, chacun avec sa propre syntaxe et son objectif. Voici les différents types de sélecteurs d'attributs et comment les utiliser.

Sélecteur de présence

Le sélecteur de présence cible les éléments qui ont un attribut spécifié, quelle que soit sa valeur. La syntaxe du sélecteur de présence est :

Conseil: Syntaxe pour le sélecteur de présence

[attribute] {
  /* Styles CSS */
}

Pour sélectionner tous les éléments <a> qui ont un attribut title :

Conseil: Sélectionner tous les éléments `<a>` avec un attribut title

a[title] {
  /* Styles CSS */
}

Ce sélecteur correspondra à tout élément <a> avec un attribut title, quelle que soit la valeur de l'attribut.

Sélecteur d'égalité

Le sélecteur d'égalité cible les éléments dont la valeur d'attribut est égale à une valeur spécifiée. La syntaxe du sélecteur d'égalité est :

Conseil: Syntaxe pour le sélecteur d'égalité

[attribute="value"] {
  /* Styles CSS */
}

Pour sélectionner tous les éléments <input> avec une valeur d'attribut type de "submit" :

Conseil: Sélectionner tous les éléments `<input>` avec type='submit'

input[type="submit"] {
  /* Styles CSS */
}

Par défaut, le sélecteur d'égalité est sensible à la casse. Pour effectuer une correspondance insensible à la casse, ajoutez un i avant le crochet fermant :

Conseil: Sélecteur d'égalité insensible à la casse

[attribute="value" i] {
  /* Styles CSS */
}

Sélecteurs de sous-chaîne

Les sélecteurs de sous-chaîne ciblent les éléments dont la valeur d'attribut contient une sous-chaîne spécifiée. Il existe trois types de sélecteurs de sous-chaîne :

Sélecteur commence par ([attribute^="value"]) : Sélectionne les éléments dont la valeur d'attribut commence par la valeur spécifiée.
Sélecteur se termine par ([attribute$="value"]) : Sélectionne les éléments dont la valeur d'attribut se termine par la valeur spécifiée.
Sélecteur contient ([attribute*="value"]) : Sélectionne les éléments dont la valeur d'attribut contient la valeur spécifiée n'importe où dans la chaîne.

Exemples de chaque sélecteur de sous-chaîne :

Conseil: Sélectionner avec un attribut commençant par une valeur

[data-category^="top"] {
  /* Styles CSS */
}

Conseil: Sélectionner avec un attribut se terminant par une valeur

[href$=".pdf"] {
  /* Styles CSS */
}

Conseil: Sélectionner avec un attribut contenant une valeur

[class*="featured"] {
  /* Styles CSS */ 
}

Sélecteurs de suffixe et de préfixe

Les sélecteurs de suffixe et de préfixe sont similaires aux sélecteurs de sous-chaîne "commence par" et "se termine par", mais correspondent à des valeurs entières plutôt qu'à des parties.

Préfixe : [attribute|='value'] : Correspond aux attributs égaux ou commençant suivis d'un trait d'union (-).
Suffixe : Non pris en charge en CSS

Exemple :

Conseil: Sélecteur de préfixe pour les langues

/* Correspond à lang='en' ou commence par 'en-' */ 
 [lang|='en'] {   
   /* Styles CSS */
 }

Combinaison des sélecteurs d'attributs

Vous pouvez utiliser plusieurs sélecteurs d'attributs ensemble pour cibler des éléments spécifiques en fonction de plus d'un attribut. Cela permet des sélections précises et complexes. Vous pouvez également combiner des sélecteurs d'attributs avec d'autres sélecteurs CSS, tels que les sélecteurs de classe, d'identifiant ou d'élément.

Pour combiner des sélecteurs d'attributs, écrivez-les l'un après l'autre dans le même sélecteur :

Conseil: Combinaison des sélecteurs d'attributs

[attribute1][attribute2] {
  /* Styles CSS */
}

Pour sélectionner tous les éléments <input> avec un attribut type de "text" et un attribut required :

Conseil: Sélection d'éléments Input spécifiques

input[type="text"][required] {
  /* Styles CSS */
}

Vous pouvez également mélanger les sélecteurs d'attributs avec d'autres sélecteurs CSS.

Conseil: Mélange de sélecteurs d'attributs avec des sélecteurs de classe

a.button[data-type="primary"] {
  /* Styles CSS */
}

Voici quelques exemples supplémentaires de combinaisons complexes :

Conseil: Sélection d'éléments avec plusieurs attributs

/* Sélectionne les éléments <img> avec un attribut "data-src" et un attribut "alt" contenant "avatar" */
img[data-src][alt*="avatar"] {
  /* Styles CSS */
}

/* Sélectionne les éléments <div> avec un attribut "role" de "alert" et un "data-type" commençant par "warning" */
div[role="alert"][data-type^="warning"] {
  /* Styles CSS */
}

/* Sélectionne les éléments <a> avec un "href" se terminant par ".pdf" et un "target" de "_blank" */
a[href$=".pdf"][target="_blank"] {
  /* Styles CSS */
}

En combinant ces méthodes, vous pouvez créer des sélections très spécifiques pour appliquer des styles aux éléments en fonction de certains attributs. Cela vous donne de la flexibilité et du contrôle sur le style de votre page.

Applications pratiques

Les sélecteurs d'attributs ont de nombreuses utilisations dans le développement web. Ils permettent de styliser les éléments en fonction de leurs attributs, ce qui facilite le ciblage d'éléments spécifiques sans ajouter de classes ou d'identifiants supplémentaires. Voici quelques exemples d'utilisation des sélecteurs d'attributs :

Stylisation des éléments de formulaire

Les sélecteurs d'attributs sont couramment utilisés pour styliser les éléments de formulaire en fonction de leurs attributs.

Conseil: Stylisation des champs de formulaire obligatoires

input[required], 
textarea[required] {
  border: 1px solid red;
}

Vous pouvez également styliser les éléments de formulaire en fonction de leur type :

Conseil: Stylisation des éléments de formulaire par type

input[type="text"] {
  background-color: #f0f0f0;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

Stylisation des liens

Les sélecteurs d'attributs peuvent être utilisés pour styliser les liens en fonction de leur attribut href.

Conseil: Ajout d'une icône aux liens externes

a[href^="http"]:after {
  content: "↗️";
}

Vous pouvez également styliser les liens qui pointent vers un type de fichier spécifique, comme les PDF :

Conseil: Stylisation des liens PDF

a[href$=".pdf"] {
  background-image: url('pdf-icon.png');
  padding-left: 20px;
}

Ciblage des attributs de données personnalisés

HTML5 a introduit les attributs de données personnalisés, qui permettent de stocker des informations supplémentaires sur les éléments. Vous pouvez utiliser les sélecteurs d'attributs pour cibler ces attributs personnalisés et appliquer des styles en fonction de leurs valeurs.

Conseil: Stylisation des attributs de données personnalisés

<div data-theme="dark">Mode sombre</div>
<div data-theme="light">Mode clair</div>

[data-theme="dark"] {
  background-color: #333;
  color: white;
}

[data-theme="light"] {
  background-color: white;
  color: #333;
}

Internationalisation

Les sélecteurs d'attributs peuvent être utilisés pour styliser les éléments en fonction de l'attribut lang, qui spécifie la langue du contenu de l'élément. Cela est utile pour les sites qui prennent en charge plusieurs langues.

Conseil: Stylisation basée sur la langue

[lang|="en"] {
  font-family: "English Font", sans-serif;
}

[lang|="ja"] {
  font-family: "Japanese Font", serif.
}

Bonnes pratiques

Lors de l'utilisation des sélecteurs d'attributs dans votre CSS, suivez quelques bonnes pratiques pour garder votre code efficace et maintenable. Voici quelques conseils :

Écrire des sélecteurs efficaces

Bien que les sélecteurs d'attributs soient utiles, leur utilisation excessive peut conduire à un CSS complexe et inefficace. Utilisez-les avec parcimonie et combinez-les avec des classes ou d'autres sélecteurs plus simples lorsque c'est possible.

Conseil: Écrire des sélecteurs efficaces

/* Moins efficace */
[data-type="button"][data-size="large"][data-color="primary"] {
  /* styles */
}

/* Plus efficace */
.btn-lg-primary {
  /* styles */
}

Éviter la surutilisation

Évitez d'utiliser des sélecteurs d'attributs pour styler un grand nombre d'éléments. Appliquer des styles à des éléments comme [class] ou [href] peut correspondre à de nombreux éléments et ralentir votre page. Utilisez plutôt des sélecteurs plus spécifiques ou des classes.

Conseil: Éviter la surutilisation

/* Évitez ceci */
[href] {
  color: blue;
}

/* Utilisez plutôt une classe ou un sélecteur plus spécifique */
a {
  color: blue;
}

Tenir compte de la spécificité

Les sélecteurs d'attributs ont une spécificité plus élevée que les sélecteurs de classe, de pseudo-classe ou d'élément, mais une spécificité plus faible que les ID. Cela signifie que les styles appliqués avec des sélecteurs d'attributs peuvent être difficiles à remplacer.

Pour gérer la spécificité, essayez d'utiliser les sélecteurs d'attributs en combinaison avec des classes plutôt que seuls. Cela rend vos styles plus modulaires et plus faciles à travailler.

Conseil: Tenir compte de la spécificité

/* Spécificité plus élevée, plus difficile à remplacer */
[type="text"] {
  border: 1px solid black;
}

/* Spécificité plus faible, plus modulaire */
.text-input[type="text"] {
  border: 1px solid black;
}