Articles
Introduction au CSS
Pseudo-classes et pseudo-éléments CSS

Pseudo-classes et pseudo-éléments CSS

Cet article explique les pseudo-classes et pseudo-éléments CSS.

Vous pouvez en apprendre davantage sur les pseudo-classes comme :hover et les pseudo-éléments comme ::before.

YouTube Video

HTML pour l'aperçu

css-pseudo.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-pseudo-class.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Pseudo Class/Element</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>Pseudo Class</h2></header>
 19        <article>
 20            <h3>:hover</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a:hover {
 25    color: red;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29                <pre>&lt;a href="#"&gt;Example of hover&lt;/a&gt;</pre>
 30                <header><h4>HTML+CSS</h4></header>
 31                <section class="sample-view">
 32                    <a href="#">Example of hover</a><br>
 33                </section>
 34            </section>
 35        </article>
 36        <article>
 37            <h3>:focus</h3>
 38            <section>
 39                <header><h4>CSS</h4></header>
 40<pre class="sample">
 41input:focus {
 42    outline: 2px solid blue;
 43}
 44</pre>
 45                <header><h4>HTML</h4></header>
 46                <pre>&lt;input type="text" placeholder="Example of focus"&gt;</pre>
 47                <header><h4>HTML+CSS</h4></header>
 48                <section class="sample-view">
 49                    <input type="text" placeholder="Example of focus">
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>:active</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58button:active {
 59    background-color: green;
 60}
 61</pre>
 62                <header><h4>HTML</h4></header>
 63                <pre>&lt;button type="button"&gt;Example of active&lt;/button&gt;</pre>
 64                <header><h4>HTML+CSS</h4></header>
 65                <section class="sample-view">
 66                    <button type="button">Example of active</button>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>:empty</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.box:empty {
 76    background-color: lightgray;
 77    border: 1px dashed black;
 78    height: 50px;
 79    width: 50px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;p class="box"&gt;&lt;/p&gt;
 85&lt;p class="box"&gt; &lt;/p&gt;
 86</pre>
 87                <header><h4>HTML+CSS</h4></header>
 88                <section class="sample-view">
 89                    <p class="box"></p>
 90                    <p class="box"> </p>
 91                </section>
 92            </section>
 93        </article>
 94        <article>
 95            <h3>:valid / :invalid</h3>
 96            <section>
 97                <header><h4>CSS</h4></header>
 98<pre class="sample">
 99input:valid {
100    border: 2px solid green;
101    background-color: #eaffea;
102}
103
104input:invalid {
105    border: 2px solid red;
106    background-color: #ffeaea;
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;form&gt;
112    &lt;label&gt;Username (min. 5 characters):&lt;/label&gt;
113    &lt;input type="text" pattern=".{5,}" required&gt;
114    &lt;button type="submit"&gt;Submit&lt;/button&gt;
115&lt;/form&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <form>
120                        <label>Username (min. 5 characters):</label>
121                        <input type="text" pattern=".{5,}" required>
122                        <button type="submit">Submit</button>
123                    </form>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>:in-range / :out-of-range</h3>
129            <section>
130                <header><h4>CSS</h4></header>
131<pre class="sample">
132input[type="number"]:in-range {
133    border: 2px solid blue;
134    background-color: #eaf4ff;
135}
136
137input[type="number"]:out-of-range {
138    border: 2px solid orange;
139    background-color: #fff4e6;
140}
141</pre>
142                <header><h4>HTML</h4></header>
143<pre>
144&lt;form&gt;
145    &lt;label&gt;Age (between 18 and 99):&lt;/label&gt;
146    &lt;input type="number" min="18" max="99" required&gt;
147    &lt;button type="submit"&gt;Submit&lt;/button&gt;
148&lt;/form&gt;
149</pre>
150                <header><h4>HTML+CSS</h4></header>
151                <section class="sample-view">
152                    <form>
153                        <label>Age (between 18 and 99):</label>
154                        <input type="number" min="18" max="99" required>
155                        <button type="submit">Submit</button>
156                    </form>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>:nth-child(n)</h3>
162            <section>
163                <header><h4>CSS</h4></header>
164<pre class="sample">
165li:nth-child(2) {
166    color: blue;
167    font-weight: bold;
168}
169
170li:nth-child(odd) {
171    background-color: lightblue;
172}
173
174li:nth-child(even) {
175    background-color: steelblue;
176}
177</pre>
178                <header><h4>HTML</h4></header>
179<pre>
180&lt;ul&gt;
181    &lt;li&gt;First Item&lt;/li&gt;
182    &lt;li&gt;Second Item&lt;/li&gt;
183    &lt;li&gt;Third Item&lt;/li&gt;
184    &lt;li&gt;Fourth Item&lt;/li&gt;
185&lt;/ul&gt;
186</pre>
187                <header><h4>HTML+CSS</h4></header>
188                <section class="sample-view">
189                    <ul>
190                        <li>First Item</li>
191                        <li>Second Item</li>
192                        <li>Third Item</li>
193                        <li>Fourth Item</li>
194                    </ul>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>:first-child</h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203small:first-child {
204    font-weight: bold;
205    color: steelblue;
206}
207</pre>
208                <header><h4>HTML</h4></header>
209<pre>
210    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
211    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
212    &lt;small&gt;Third Small Text&lt;/small&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <small>First Small Text</small><br>
217                    <small>Second Small Text</small><br>
218                    <small>Third Small Text</small>
219                </section>
220            </section>
221        </article>
222        <article>
223            <h3>:last-child</h3>
224            <section>
225                <header><h4>CSS</h4></header>
226<pre class="sample">
227small:last-child {
228    font-weight: bold;
229    color: seagreen;
230}
231</pre>
232                <header><h4>HTML</h4></header>
233<pre>
234    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
235    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
236    &lt;small&gt;Third Small Text&lt;/small&gt;
237</pre>
238                <header><h4>HTML+CSS</h4></header>
239                <section class="sample-view">
240                    <small>First Small Text</small><br>
241                    <small>Second Small Text</small><br>
242                    <small>Third Small Text</small>
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>:has()</h3>
248            <section>
249                <header><h4>CSS</h4></header>
250<pre class="sample">
251p:has(span.child) {
252    border: 2px solid black;
253}
254</pre>
255                <header><h4>HTML</h4></header>
256<pre>
257&lt;p&gt;Paragraph with &lt;span class="child"&gt;span element&lt;/span&gt;&lt;/p&gt;
258&lt;p&gt;Paragraph without span element&lt;/p&gt;
259</pre>
260                <header><h4>HTML+CSS</h4></header>
261                <section class="sample-view">
262                    <p>Paragraph with <span class="child">span element</span></p>
263                    <p>Paragraph without span element</p>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>:not()</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272q:not(.quote2) {
273    font-weight: bold;
274    color: steelblue;
275}
276</pre>
277                <header><h4>HTML</h4></header>
278<pre>
279    &lt;q class="quote1"&gt;First Quote&lt;/q&gt;&lt;br&gt;
280    &lt;q class="quote2"&gt;Second Quote&lt;/q&gt;&lt;br&gt;
281    &lt;q class="quote3"&gt;Third Quote&lt;/q&gt;
282</pre>
283                <header><h4>HTML+CSS</h4></header>
284                <section class="sample-view">
285                    <q class="quote1">First Quote</q><br>
286                    <q class="quote2">Second Quote</q><br>
287                    <q class="quote3">Third Small Text</q>
288                </section>
289            </section>
290        </article>
291        <article>
292            <h3>:where() / :is()</h3>
293            <section>
294                <header><h4>CSS</h4></header>
295<pre class="sample">
296:where(p, .detail) span {
297    color: darkcyan;
298    text-decoration: line-through;
299}
300:is(p, .detail) span {
301    font-style: italic;
302}
303p span {
304    text-decoration: none; /* Applied */
305    font-style: normal; /* Not Applied */
306}
307</pre>
308                <header><h4>HTML</h4></header>
309<pre>
310&lt;p class="detail"&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; with the "detail" class.&lt;/p&gt;
311&lt;p&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; without the "detail" class.&lt;/p&gt;
312</pre>
313                <header><h4>HTML+CSS</h4></header>
314                <section class="sample-view">
315                    <p class="detail">This is a <span>paragraph</span> with the "detail" class.</p>
316                    <p>This is a <span>paragraph</span> without the "detail" class.</p>
317                </section>
318            </section>
319        </article>
320        <article>
321            <h3>:checked</h3>
322            <section>
323                <header><h4>CSS</h4></header>
324<pre class="sample">
325input:checked {
326    outline: 4px solid red;
327}
328</pre>
329                <header><h4>HTML</h4></header>
330<pre>
331    &lt;label&gt;&lt;input type="checkbox"&gt;First Checkbox&lt;/label&gt;
332    &lt;label&gt;&lt;input type="checkbox"&gt;Second Checkbox&lt;/label&gt;
333</pre>
334                <header><h4>HTML+CSS</h4></header>
335                <section class="sample-view">
336                    <label><input type="checkbox">First Checkbox</label>
337                    <label><input type="checkbox">Second Checkbox</label>
338                </section>
339            </section>
340        </article>
341        <article>
342            <h3>:disabled</h3>
343            <section>
344                <header><h4>CSS</h4></header>
345<pre class="sample">
346button:disabled {
347    background-color: gray;
348    cursor: not-allowed;
349}
350</pre>
351                <header><h4>HTML</h4></header>
352                <pre>&lt;button type="button" disabled&gt;Example of active&lt;/button&gt;</pre>
353                <header><h4>HTML+CSS</h4></header>
354                <section class="sample-view">
355                    <button type="button" disabled>Example of active</button>
356                </section>
357            </section>
358        </article>
359        <article>
360            <h3>:visited</h3>
361            <section>
362                <header><h4>CSS</h4></header>
363<pre class="sample">
364.link:visited {
365    color: purple;
366}
367</pre>
368                <header><h4>HTML</h4></header>
369                <pre>&lt;a href="https://example.com" class="link"&gt;Example&lt;/a&gt;</pre>
370                <header><h4>HTML+CSS</h4></header>
371                <section class="sample-view">
372                    <a href="https://example.com" class="link">Example</a>
373                </section>
374            </section>
375        </article>
376        <article>
377            <h3>:first-of-type</h3>
378            <section>
379                <header><h4>CSS</h4></header>
380<pre class="sample">
381.first-example :first-of-type {
382    font-weight: bold;
383    color: steelblue;
384}
385</pre>
386                <header><h4>HTML</h4></header>
387<pre>
388&lt;p class="first-example"&gt;
389    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
390    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
391    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
392&lt;/p&gt;
393</pre>
394                <header><h4>HTML+CSS</h4></header>
395                <section class="sample-view">
396                    <p class="first-example">
397                        <var>First Variable</var>, <code>First Code Snippet</code><br>
398                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
399                        <var>Third Variable</var>, <code>Third Code Snippet</code>
400                    </p>
401                </section>
402            </section>
403        </article>
404        <article>
405            <h3>:last-of-type</h3>
406            <section>
407                <header><h4>CSS</h4></header>
408<pre class="sample">
409.last-example :last-of-type {
410    font-weight: bold;
411    color: seagreen;
412}
413</pre>
414                <header><h4>HTML</h4></header>
415<pre>
416&lt;p class="last-example"&gt;
417    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
418    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
419    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
420&lt;/p&gt;
421</pre>
422                <header><h4>HTML+CSS</h4></header>
423                <section class="sample-view">
424                    <p class="last-example">
425                        <var>First Variable</var>, <code>First Code Snippet</code><br>
426                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
427                        <var>Third Variable</var>, <code>Third Code Snippet</code>
428                    </p>
429                </section>
430            </section>
431        </article>
432        <article>
433            <h3>:nth-of-type(n)</h3>
434            <section>
435                <header><h4>CSS</h4></header>
436<pre class="sample">
437.nth-example :nth-of-type(2) {
438    font-weight: bold;
439    color: lightsalmon;
440}
441</pre>
442                <header><h4>HTML</h4></header>
443<pre>
444&lt;p class="nth-example"&gt;
445    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
446    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
447    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
448&lt;/p&gt;
449</pre>
450                <header><h4>HTML+CSS</h4></header>
451                <section class="sample-view">
452                    <p class="nth-example">
453                        <var>First Variable</var>, <code>First Code Snippet</code><br>
454                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
455                        <var>Third Variable</var>, <code>Third Code Snippet</code>
456                    </p>
457                </section>
458            </section>
459        </article>
460
461        <header><h2>Pseudo Element</h2></header>
462        <article>
463            <h3>::before</h3>
464            <section>
465                <header><h4>CSS</h4></header>
466<pre class="sample">
467span.note::before {
468    content: "Note: ";
469    color: red;
470}
471</pre>
472                <header><h4>HTML</h4></header>
473                <pre>&lt;span class="note"&gt;Example Text&lt;/span&gt;</pre>
474                <header><h4>HTML+CSS</h4></header>
475                <section class="sample-view">
476                    <span class="note">Example Text</a><br>
477                </section>
478            </section>
479        </article>
480        <article>
481            <h3>::after</h3>
482            <section>
483                <header><h4>CSS</h4></header>
484<pre class="sample">
485span.five-stars::after {
486    content: "*****";
487    color: gold;
488}
489</pre>
490                <header><h4>HTML</h4></header>
491                <pre>&lt;span class="five-stars"&gt;Example Text&lt;/span&gt;</pre>
492                <header><h4>HTML+CSS</h4></header>
493                <section class="sample-view">
494                    <span class="five-stars">Example Text</a>
495                </section>
496            </section>
497        </article>
498        <article>
499            <h3>::placeholder</h3>
500            <section>
501                <header><h4>CSS</h4></header>
502<pre class="sample">
503input::placeholder {
504    color: rgba(0, 150, 150, 0.7);
505    font-size: 14px;
506    font-style: italic;
507}
508</pre>
509                <header><h4>HTML</h4></header>
510                <pre>&lt;input type="text" placeholder="Enter your name"&gt;</pre>
511                <header><h4>HTML+CSS</h4></header>
512                <section class="sample-view">
513                    <input type="text" placeholder="Enter your name">
514                </section>
515            </section>
516        </article>
517        <article>
518            <h3>::first-letter</h3>
519            <section>
520                <header><h4>CSS</h4></header>
521<pre class="sample">
522p.first::first-letter {
523    font-size: 2em;
524    color: blue;
525}
526</pre>
527                <header><h4>HTML</h4></header>
528<pre>
529&lt;p class="first"&gt;
530    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
531    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
532    &lt;span&gt;Third Text&lt;/span&gt;
533&lt;/p&gt;
534</pre>
535                <header><h4>HTML+CSS</h4></header>
536                <section class="sample-view">
537                    <p class="first">
538                        <span>First Text</span><br>
539                        <span>Second Text</span><br>
540                        <span>Third Text</span>
541                    </p>
542                </section>
543<pre class="sample-error">
544/* Not Valid: `::first-letter` can only be applied to
545              block-level elements */
546span::first-letter {
547    font-size: 2em;
548    color: red;
549}
550</pre>
551            </section>
552        </article>
553        <article>
554            <h3>::first-line</h3>
555            <section>
556                <header><h4>CSS</h4></header>
557<pre class="sample">
558p.second::first-line {
559    font-weight: bold;
560    color: green;
561}
562</pre>
563                <header><h4>HTML</h4></header>
564<pre>
565&lt;p class="second"&gt;
566    First Text&lt;br&gt;
567    Second Text&lt;br&gt;
568    Third Text
569&lt;/p&gt;
570</pre>
571                <header><h4>HTML+CSS</h4></header>
572                <section class="sample-view">
573                    <p class="second">
574                        First Text<br>
575                        Second Text<br>
576                        Third Text
577                    </p>
578                </section>
579<pre class="sample-error">
580/* Not Valid: `::first-line` can only be applied to block-level elements */
581span::first-line {
582    font-size: 2em;
583    color: red;
584}
585</pre>
586            </section>
587        </article>
588        <article>
589            <h3>::selection</h3>
590            <section>
591                <header><h4>CSS</h4></header>
592<pre class="sample">
593span::selection {
594    background-color: yellow;
595    color: black;
596}
597</pre>
598                <header><h4>HTML</h4></header>
599<pre>
600&lt;p&gt;
601    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
602    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
603    &lt;span&gt;Third Text&lt;/span&gt;
604&lt;/p&gt;
605</pre>
606                <header><h4>HTML+CSS</h4></header>
607                <section class="sample-view">
608                    <p>
609                        <span>First Text</span><br>
610                        <span>Second Text</span><br>
611                        <span>Third Text</span>
612                    </p>
613                </section>
614            </section>
615        </article>
616    </main>
617</body>
618</html>

Pseudo-classes

Les pseudo-classes CSS sont des fonctions qui appliquent des styles à des éléments en fonction de conditions spécifiques telles que les états des éléments ou la hiérarchie. Elles vous permettent d'ajouter des styles spéciaux basés sur les états ou les positions des éléments, ce qui est utile pour représenter des situations dynamiques qui ne peuvent pas être spécifiées par des classes ou des IDs normaux. Les pseudo-classes facilitent l'implémentation d'interfaces dynamiques et de styles basés sur des conditions spécifiques, permettant un design qui répond à l'interaction de l'utilisateur ou à la structure du contenu.

Syntaxe de base des pseudo-classes

La syntaxe de base des pseudo-classes est la suivante.

1selector:pseudo-class {
2    /* Styles */
3}
  • sélecteur est l'élément cible.
  • La partie pseudo-classe représente une pseudo-classe qui indique un état ou une condition spécifique.
  • : est utilisé pour sélectionner les pseudo-classes.

Pseudo-classes couramment utilisées

:hover 

1a:hover {
2    color: red;
3}
  • :hover applique des styles lorsque le curseur de la souris survole un élément.
  • Dans cet exemple, lorsque la souris survole un lien, la couleur du texte change en rouge.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus applique des styles lorsqu'un élément reçoit le focus. Il est principalement utilisé pour les éléments de formulaire et les liens.
  • Dans cet exemple, un contour bleu apparaît lorsqu'un élément input est focalisé.

:active 

1button:active {
2    background-color: green;
3}
  • :active applique des styles à un élément lorsqu'il est actif (lorsqu'il est cliqué).
  • Dans cet exemple, pendant que le bouton est cliqué, la couleur de fond change en vert.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • La pseudo-classe :empty est utilisée pour appliquer des styles aux éléments qui n'ont pas d'enfants. L'élément cible ne doit pas contenir de nœuds de texte, d'espaces blancs ou de commentaires.
  • Dans cet exemple, si un élément avec la classe box ne contient rien, un fond gris et une bordure noire en pointillés sont appliqués à cet élément. Si des espaces blancs sont présents, le style n'est pas appliqué.

:valid / :invalid 

1input:valid {
2    border: 2px solid green;
3    background-color: #eaffea;
4}
5
6input:invalid {
7    border: 2px solid red;
8    background-color: #ffeaea;
9}

  • :valid est un style appliqué aux éléments de formulaire ayant des valeurs d'entrée valides. Le style :valid est appliqué lorsque les conditions spécifiées par les attributs HTML tels que pattern ou type (par exemple, email) sont respectées.

  • :invalid est un style appliqué aux éléments de formulaire ayant des valeurs d'entrée invalides. Le style :invalid est appliqué lorsqu'un élément de formulaire ne respecte pas les règles de validation HTML (par exemple, type="email").

  • Dans cet exemple, une bordure verte est affichée si le texte saisi contient 5 caractères ou plus, comme spécifié par l'attribut pattern. Si le texte saisi contient moins de 5 caractères, une bordure rouge est affichée.

:in-range / :out-of-range 

1input[type="number"]:in-range {
2    border: 2px solid blue;
3    background-color: #eaf4ff;
4}
5
6input[type="number"]:out-of-range {
7    border: 2px solid orange;
8    background-color: #fff4e6;
9}

  • :in-range est un style appliqué lorsqu'un élément de saisie numérique contient une valeur dans une plage spécifiée. Le style :in-range est appliqué lorsque les conditions spécifiées par les attributs min et max en HTML sont remplies.

  • :out-of-range est un style appliqué lorsqu'un élément de saisie numérique contient une valeur en dehors de la plage spécifiée. Le style :out-of-range est appliqué lorsque la valeur dépasse la plage spécifiée par les attributs min ou max.

  • Dans cet exemple, lorsqu'une valeur comprise dans la plage spécifiée par les attributs min="18" et max="99" (de 18 à 99 inclus) est saisie, une bordure bleue s'affiche. Lorsqu'une valeur en dehors de la plage est saisie, une bordure orange s'affiche.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() applique des styles en fonction de la position d'un élément enfant au sein de son parent. Vous pouvez spécifier un nombre ou une expression pour n.
  • Dans cet exemple, le texte du deuxième élément de liste devient bleu.
Application aux éléments impairs et pairs 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • En spécifiant even ou odd, vous pouvez appliquer des styles aux éléments impairs ou pairs.
  • Dans cet exemple, différentes couleurs de fond sont appliquées aux lignes paires et impaires. Cela peut être utilisé pour des conceptions de table à rayures, par exemple.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child applique des styles au premier élément enfant d'un parent.
  • Dans cet exemple, le texte du premier élément small est mis en gras avec une nuance de bleu.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child applique des styles au dernier élément enfant d'un parent.
  • Dans cet exemple, le texte du dernier élément small est mis en gras avec une nuance de vert.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • La pseudo-classe :has() en CSS fonctionne comme un sélecteur parent. En utilisant cette pseudo-classe, vous pouvez sélectionner un élément parent en fonction de la présence d'éléments enfants.
  • Dans cet exemple, la propriété border est appliquée aux éléments p contenant des éléments span avec la classe .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() applique des styles aux éléments qui ne répondent pas à des conditions spécifiques.
  • Dans cet exemple, le texte des éléments q, sauf ceux ayant la classe quote2, est mis en gras avec une nuance de bleu.

:where() / :is() 

 1:where(p, .detail) span {
 2    color: darkcyan;
 3    text-decoration: line-through;
 4}
 5:is(p, .detail) span {
 6    font-style: italic;
 7}
 8p span {
 9    text-decoration: none; /* Applied */
10    font-style: normal; /* Not Applied */
11}
  • La pseudo-classe :where() est un sélecteur CSS spécial qui fixe la spécificité à zéro. Cela est utile lorsque vous souhaitez gérer plusieurs sélecteurs collectivement et appliquer des styles sans affecter la spécificité des éléments sélectionnés.
  • La pseudo-classe :is() regroupe plusieurs sélecteurs et sélectionne les éléments qui remplissent l'une des conditions. La pseudo-classe :is() porte la même spécificité que les sélecteurs normaux, mais applique les styles en fonction de la spécificité la plus élevée parmi ses sélecteurs internes.
  • Dans cet exemple, :where() et :is() sont utilisés pour appliquer des styles aux éléments <p> et <span> dans la classe detail. Le style text-decoration défini par :where() est remplacé par le CSS suivant. Cependant, le style défini par :is() a une spécificité plus élevée et n'est pas remplacé par le CSS suivant.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked applique des styles lorsqu'une case à cocher ou un bouton radio est sélectionné.
  • Dans cet exemple, une bordure rouge est affichée sur l'élément input coché.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled applique des styles aux éléments de formulaire désactivés.
  • Dans cet exemple, un fond gris et un curseur 'not-allowed' sont appliqués au bouton désactivé.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited est utilisé pour appliquer des styles aux liens visités.
  • Dans cet exemple, après avoir cliqué sur un lien et l'avoir visité, la couleur du texte de l'élément <a> devient violette.
Limitations de confidentialité et de style

:visited a des restrictions de style pour des raisons de protection de la vie privée. Cela empêche les sites externes de déduire l'historique de navigation de l'utilisateur. Les propriétés qui peuvent être modifiées avec :visited sont limitées aux suivantes :.

color
background-color
border-color
outline-color
column-rule-color
text-decoration-color
fill
stroke

D'autre part, les propriétés autres que celles-ci (par exemple, display, visibility, position, etc.) ne peuvent pas être modifiées avec :visited. Cela empêche que la vie privée de l'utilisateur ne soit divulguée via l'historique des visites.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type sélectionne le premier élément de son type (avec le même nom de balise) dans son élément parent.
  • Dans cet exemple, le texte du premier élément <var> et de l'élément <code> de la classe first-example est stylisé en bleu gras.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type sélectionne le dernier élément de son type dans son élément parent.
  • Dans cet exemple, le texte du dernier élément <var> et de l'élément <code> de la classe last-example est stylisé en vert gras.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() applique des styles à la nième occurrence d'éléments du même type.
  • Dans cet exemple, le texte du deuxième élément <var> et de l'élément <code> de la classe nth-example est stylisé en orange gras.

Pseudo-éléments

Les pseudo-éléments en CSS sont utilisés pour appliquer des styles à des parties spécifiques de l'élément sélectionné. Contrairement aux pseudo-classes, les pseudo-éléments se concentrent sur des parties spécifiques d'un élément plutôt que sur l'élément entier. Par exemple, ils sont utilisés pour ajouter du contenu avant ou après un élément ou appliquer des styles à des caractères ou lignes spécifiques.

Syntaxe de base des pseudo-éléments

Les pseudo-éléments sont généralement écrits avec :: (double deux-points) après le sélecteur. Ceci est pour les distinguer des pseudo-classes.

1selector::pseudo-element {
2    /* Styles */
3}
  • sélecteur est l'élément cible.
  • La partie pseudo-element représente un pseudo-élément qui fait référence à une partie spécifique ou un aspect d'un élément.
  • Vous pouvez spécifier un pseudo-élément en utilisant ::.

Pseudo-éléments couramment utilisés

::before 

1span.note::before {
2    content: "Note: ";
3    color: red;
4}

  • ::before insère du contenu virtuel avant le contenu d'un élément et applique des styles à cette partie. Il est utile pour insérer des icônes ou des étiquettes, par exemple.

  • Dans cet exemple, le texte "Note:" est inséré avant les éléments <span> avec la classe note. Le contenu spécifié ici n'existe pas dans le HTML réel ; il est ajouté virtuellement via CSS. Cela signifie que vous ne pouvez pas manipuler directement le contenu ajouté via JavaScript, etc.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after insère du contenu virtuel après le contenu d'un élément. Il est généralement utilisé pour ajouter du contenu supplémentaire ou décoratif après un élément.
  • Dans cet exemple, une icône d'étoile dorée est ajoutée après l'élément <span> avec la classe five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Le pseudo-élément ::placeholder est utilisé pour styliser le texte d'espace réservé dans les éléments de formulaire. Par défaut, il est généralement affiché en texte gris clair, mais avec le pseudo-élément ::placeholder, vous pouvez modifier le style pour l'adapter à votre design.
  • Dans cet exemple, la couleur du texte d'espace réservé pour l'élément input est définie sur un bleu transparent à 70 %, la taille de la police sur 14px, et le texte est en italique.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter applique un style à la première lettre d'un élément de type bloc. Il est utilisé pour les effets typographiques comme ceux que l'on voit dans les magazines ou les journaux, où la première lettre est mise en valeur. Notez que ce pseudo-élément n'est efficace que sur les éléments de type bloc et ne peut pas être appliqué directement aux éléments en ligne comme <span>.
  • Dans cet exemple, la première lettre du paragraphe sera deux fois plus grande, en gras, et bleue.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line applique un style à la première ligne d'un élément de type bloc. Il est particulièrement utilisé pour les paragraphes de texte, vous permettant d'appliquer des styles différents à la première ligne.
  • Dans cet exemple, la première ligne du paragraphe sera en gras et verte.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection applique des styles à la partie du texte sélectionnée (surbrillée) par l'utilisateur. Avec cela, vous pouvez changer la couleur de fond et la couleur du texte lorsque le texte est sélectionné.
  • Dans cet exemple, lorsque le texte d'un élément <span> est sélectionné, le fond devient jaune et le texte devient noir.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Caractères spéciaux et fonctions dans CSSRègles CSS `@`