1. Types de sélecteurs d'attributs
Les sélecteurs d'attributs en CSS permettent de sélectionner des éléments HTML en fonction des valeurs de leurs attributs, comme id, class, name, type, et d'autres. Ils offrent une grande flexibilité et précision pour styliser des éléments de formulaire, des liens et d'autres éléments avec des attributs uniques. Dans cet article, nous explorerons les différents types de sélecteurs d'attributs et leur utilisation.
Les sélecteurs d'attributs sont divisés en plusieurs catégories, permettant de sélectionner des éléments en fonction de la présence d'un attribut, de sa valeur exacte ou d'une partie de celle-ci. Les principaux types de sélecteurs d'attributs sont :
- Sélecteur d'attribut : sélectionne les éléments qui contiennent un attribut spécifique, indépendamment de sa valeur.
- Sélecteur d'attribut avec une valeur : sélectionne des éléments ayant un attribut égal à une valeur donnée.
- Sélecteur d'attribut avec une valeur initiale : sélectionne des éléments dont la valeur de l'attribut commence par un préfixe spécifié.
- Sélecteur d'attribut avec une valeur finale : sélectionne des éléments dont la valeur de l'attribut se termine par un suffixe donné.
- Sélecteur d'attribut contenant une valeur : sélectionne des éléments dont la valeur de l'attribut contient une sous-chaîne spécifique.
- Sélecteur d'attribut avec un découpage par espace : sélectionne des éléments dont l'attribut contient un mot spécifique, séparé par des espaces.
- Sélecteur d'attribut avec un découpage par tiret : sélectionne des éléments dont l'attribut contient un mot spécifique, séparé par des tirets.
2. Sélecteur d'attribut (Attribute Selector)
Le sélecteur d'attribut sélectionne les éléments ayant un attribut spécifique, indépendamment de sa valeur. Ce sélecteur est utile lorsque nous devons sélectionner tous les éléments ayant un attribut spécifique.
input[type] {
border: 1px solid black;
}
<input type="text">
<input type="password">
<input type="email">
<input>
Dans cet exemple, tous les éléments <input> ayant l'attribut type recevront une bordure noire, indépendamment de la valeur de cet attribut.
3. Sélecteur d'attribut avec une valeur
Le sélecteur d'attribut avec une valeur sélectionne les éléments dont l'attribut correspond à une valeur spécifique. Cela est utile pour sélectionner des éléments ayant une valeur d'attribut particulière, comme tous les champs de texte ou les liens qui s'ouvrent dans un nouvel onglet.
input[type="text"] {
background-color: #f0f0f0;
}
<input type="text">
<input type="password">
<input type="email">
Ici, uniquement le champ texte <input type="text"> recevra un fond gris clair.
4. Sélecteur d'attribut avec une valeur initiale
Le sélecteur d'attribut avec une valeur initiale sélectionne les éléments dont la valeur de l'attribut commence par un préfixe donné. Le préfixe est spécifié après le symbole ^=. Ce sélecteur est utile, par exemple, pour sélectionner tous les liens menant vers un site spécifique.
a[href^="https://example.com"] {
color: green;
}
<a href="https://example.com/page1">Lien vers le site example.com</a>
<a href="https://another.com">Autre lien</a>
Seulement le premier lien sera coloré en vert, car il commence par "https://example.com".
5. Sélecteur d'attribut avec une valeur finale
Le sélecteur d'attribut avec une valeur finale sélectionne les éléments dont la valeur de l'attribut se termine par un certain suffixe. Le suffixe est spécifié après le symbole $=. Ce sélecteur est utilisé pour sélectionner des fichiers d'un type spécifique, comme des images au format .png.
img[src$=".png"] {
border: 2px solid blue;
}
<img src="image1.png" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
Ici, uniquement l'image avec l'extension .png recevra une bordure bleue.
6. Sélecteur d'attribut contenant une valeur
Le sélecteur d'attribut contenant une valeur sélectionne les éléments dont la valeur de l'attribut contient une certaine sous-chaîne. La sous-chaîne est spécifiée après le symbole *=. Ce sélecteur est adapté lorsque nous avons besoin de sélectionner des éléments dont l'attribut contient une partie spécifique d'une valeur, comme les liens vers une section précise d'un site.
a[href*="section"] {
font-weight: bold;
}
<a href="https://example.com/section1">Lien vers la section 1</a>
<a href="https://example.com/about">À propos</a>
<a href="https://example.com/section2">Lien vers la section 2</a>
Uniquement les liens contenant "section" dans leur href seront mis en gras.
GO TO FULL VERSION