Détails des sélecteurs d'attributs en CSS
Cet article explique les détails des sélecteurs d'attributs en CSS.
Vous pouvez apprendre à écrire des correspondances avant, arrière et partielles pour les sélecteurs d'attributs.
YouTube Video
HTML pour l'aperçu
css-attribute-selector.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Pseudo Class/Element</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-attribute-selector.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Attribute Selectors</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Attribute Selectors</h2></header>
19 <article>
20 <h3>element[attribute]</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24a[target] {
25 font-weight: bold;
26}
27</pre>
28 <header><h4>HTML</h4></header>
29<pre>
30<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
32</pre>
33 <header><h4>HTML+CSS</h4></header>
34 <section class="sample-view">
35 <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
36 <a href="https://example.com">Example Link (no target)</a>
37 </section>
38 </section>
39 </article>
40 <article>
41 <h3>element[attribute=value] : =</h3>
42 <section>
43 <header><h4>CSS</h4></header>
44<pre class="sample">
45input[type="text"] {
46 border: 2px solid green;
47}
48</pre>
49 <header><h4>HTML</h4></header>
50<pre>
51<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
54</pre>
55 <header><h4>HTML+CSS</h4></header>
56 <section class="sample-view">
57 <input type="text" placeholder="Enter text here">
58 <input type="password" placeholder="Password (no border)">
59 <input type="text" placeholder="Another text input">
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>element[attribute^=value] : ^=</h3>
65 <section>
66 <header><h4>CSS</h4></header>
67<pre class="sample">
68a[href^="https://"] {
69 font-weight: bold;
70}
71</pre>
72 <header><h4>HTML</h4></header>
73<pre>
74<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
77</pre>
78 <header><h4>HTML+CSS</h4></header>
79 <section class="sample-view">
80 <a href="https://example.com">Secure Link (https)</a>
81 <a href="http://example.com">Non-Secure Link (http)</a>
82 <a href="https://another-example.com">Another Secure Link (https)</a>
83 </section>
84 </section>
85 </article>
86 <article>
87 <h3>element[attribute$=value] : $=</h3>
88 <section>
89 <header><h4>CSS</h4></header>
90<pre class="sample">
91img[src$=".jpg"] {
92 border-radius: 10px;
93}
94</pre>
95 <header><h4>HTML</h4></header>
96<pre>
97<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
100</pre>
101 <header><h4>HTML+CSS</h4></header>
102 <section class="sample-view">
103 <img src="image.jpg" alt="JPG Image" width="100">
104 <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105 <img src="example.jpg" alt="Another JPG Image" width="100">
106 </section>
107 </section>
108 </article>
109 <article>
110 <h3>element[attribute*=value] : *=</h3>
111 <section>
112 <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115 background-color: yellow;
116}
117</pre>
118 <header><h4>HTML</h4></header>
119<pre>
120<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
123</pre>
124 <header><h4>HTML+CSS</h4></header>
125 <section class="sample-view">
126 <p class="highlight-text">This paragraph is highlighted.</p>
127 <p class="normal-text">This paragraph is not highlighted.</p>
128 <p class="text-highlight-important">This is another highlighted paragraph.</p>
129 </section>
130 </section>
131 </article>
132 <article>
133 <h3>element[attribute~=value] : ~=</h3>
134 <section>
135 <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138 border: 1px solid red;
139}
140</pre>
141 <header><h4>HTML</h4></header>
142<pre>
143<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
146</pre>
147 <header><h4>HTML+CSS</h4></header>
148 <section class="sample-view">
149 <div class="featured">This div is featured.</div>
150 <div class="content featured">This div is also featured.</div>
151 <div class="content">This div is not featured.</div>
152 </section>
153 </section>
154 </article>
155 <article>
156 <h3>element[attribute|=value] : |=</h3>
157 <section>
158 <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161 font-style: italic;
162}
163</pre>
164 <header><h4>HTML</h4></header>
165<pre>
166<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
169</pre>
170 <header><h4>HTML+CSS</h4></header>
171 <section class="sample-view">
172 <p lang="en">This paragraph is in English.</p>
173 <p lang="en-US">This paragraph is in American English.</p>
174 <p lang="fr">Ce paragraphe est en français.</p>
175 </section>
176 </section>
177 </article>
178
179 <article>
180 <h3>CSS Attribute Selector Example : input[required] & input[placeholder]</h3>
181 <section>
182 <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185 background-color: #ffcccc;
186}
187
188input[placeholder] {
189 font-style: italic;
190 color: #999;
191}
192</pre>
193 <header><h4>HTML</h4></header>
194<pre>
195<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
198</pre>
199 <header><h4>HTML+CSS</h4></header>
200 <section class="sample-view">
201 <input type="text" required placeholder="Enter your name">
202 <input type="email" required placeholder="Enter your email">
203 <input type="text" placeholder="Optional field">
204 </section>
205 </section>
206 </article>
207 <article>
208 <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209 <section>
210 <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213 color: orange;
214}
215
216a[href^="https://"] {
217 color: green;
218}
219</pre>
220 <header><h4>HTML</h4></header>
221<pre>
222<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
225</pre>
226 <header><h4>HTML+CSS</h4></header>
227 <section class="sample-view">
228 <a href="http://example.com">HTTP Link</a>
229 <a href="https://secure.example.com">HTTPS Link</a>
230 <a href="/relative/path">Relative Link</a>
231 </section>
232 </section>
233 </article>
234 <article>
235 <h3>Attribute Selectors</h3>
236 <section>
237 <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240 border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244 opacity: 0.5;
245}
246</pre>
247 <header><h4>HTML</h4></header>
248<pre>
249<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
251</pre>
252 <header><h4>HTML+CSS</h4></header>
253 <section class="sample-view">
254 <img src="pattern.png" alt="PNG Image" width="100">
255 <img src="image.jpg" alt="JPEG Image" width="100">
256 </section>
257 </section>
258 </article>
259
260 </main>
261</body>
262</html>Détails des sélecteurs d'attributs en CSS
Les sélecteurs d'attributs CSS sont utilisés pour sélectionner les éléments HTML ayant des attributs spécifiques. Cela vous permet de styliser les éléments en fonction de leurs valeurs d'attributs. Nous allons maintenant expliquer étape par étape, des bases à l'utilisation avancée des sélecteurs d'attributs.
Types et syntaxe des sélecteurs d'attributs
Il existe différents types de sélecteurs d'attributs. Ici, nous allons examiner en détail chaque type de sélecteur.
Sélection des éléments avec un attribut
1a[target] {
2 font-weight: bold;
3}- En spécifiant le nom de l'attribut, vous pouvez sélectionner tous les éléments qui possèdent l'attribut spécifié.
- Dans cet exemple, tous les éléments
<a>avec l'attributtargetont leur texte en gras.
Sélection des éléments avec une valeur spécifique d'attribut
1input[type="text"] {
2 border: 2px solid green;
3}- En utilisant
=, vous pouvez sélectionner les éléments dont la valeur de l'attribut correspond exactement à une valeur spécifique. - Dans cet exemple, tous les éléments
<input>avec l'attributtypedéfini sur"text"auront une bordure verte.
Sélection des éléments avec une correspondance partielle de la valeur d'attribut
Vous pouvez spécifier des correspondances partielles de valeurs d'attributs à l'aide des trois sélecteurs suivants.
- Commence par (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Sélectionne les éléments dont la valeur de l'attribut commence par la chaîne spécifiée.
- Dans cet exemple, tous les liens avec un attribut
hrefcommençant par"https://"seront affichés en gras.
- Finit par (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Sélectionne les éléments dont la valeur de l'attribut se termine par la chaîne spécifiée.
- Dans cet exemple, des styles qui arrondissent les coins sont appliqués à toutes les images avec un attribut
srcse terminant par.jpg.
- Contient (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Sélectionne les éléments dont la valeur d'attribut contient la chaîne spécifiée.
- Dans cet exemple, une couleur de fond jaune est appliquée à tous les éléments
<p>dont l'attributclasscontient"highlight".
Sélection des éléments où la valeur de l'attribut contient un mot séparé par des espaces (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=sélectionne les éléments si la valeur d'attribut contient un mot spécifique parmi des mots séparés par des espaces.- Dans cet exemple, une bordure rouge est appliquée à tous les éléments
<div>dont l'attributclasscontient le mot"featured".
Sélectionner les éléments dont la valeur de l'attribut commence par une valeur séparée par un trait d'union (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=sélectionne les éléments si la valeur d'attribut correspond à la chaîne spécifiée ou commence par celle-ci suivie d'un tiret. Il est principalement utilisé avec l'attribut de langue (lang).- Dans cet exemple, l'italique est appliqué à tous les éléments
<p>dont l'attributlangcommence par"en", comme"en"ou"en-US".
Exemples et applications pratiques
Ensuite, examinons quelques scénarios pratiques.
Styliser les champs de saisie de formulaire
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- Dans cet exemple, une couleur de fond rougeâtre est appliquée à tous les champs de saisie avec l'attribut
required, et le texte d'espace réservé des champs de saisie avec l'attributplaceholderest stylisé en italique avec une couleur pâle.
Styliser en fonction des protocoles de lien
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Ici, les liens commençant par
http://sont définis en orange, et les liens commençant parhttps://sont définis en vert. Cela permet une différenciation visuelle entre les liens sécurisés et non sécurisés.
Styliser en fonction des formats d'image
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- Dans cet exemple, une bordure bleue est ajoutée aux images au format
.png, et l'opacité des images au format.jpgest réglée à 50%.
Résumé
Les sélecteurs d'attributs CSS sont un moyen flexible et puissant de sélectionner des éléments en fonction des attributs HTML. L'utilisation de ces sélecteurs permet un style plus spécifique.
Utilisez la syntaxe de base et les exemples appliqués expliqués dans cet article pour réaliser facilement des styles plus avancés.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.