Articles
Introductie tot CSS
CSS Pseudo-klassen en Pseudo-elementen

CSS Pseudo-klassen en Pseudo-elementen

Dit artikel legt CSS pseudo-klassen en pseudo-elementen uit.

Je kunt leren over pseudo-klassen zoals :hover en pseudo-elementen zoals ::before.

YouTube Video

HTML voor Voorbeeldweergave

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-klassen

CSS pseudo-klassen zijn functies die stijlen toepassen op elementen op basis van specifieke voorwaarden, zoals elementstaten of hiërarchie. Ze stellen je in staat om speciale stijlen toe te voegen op basis van elementstaten of posities, wat nuttig is voor het weergeven van dynamische situaties die niet met gewone klassen of ID's kunnen worden gespecificeerd. Pseudo-klassen maken het eenvoudig om dynamische gebruikersinterfaces en stijl toe te passen op basis van specifieke voorwaarden, waardoor ontwerpen mogelijk worden die reageren op gebruikersinteractie of inhoudsstructuur.

Basis Syntax van Pseudo-klassen

De basis syntax van pseudo-klassen is als volgt.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector is het doelelement.
  • Het pseudo-class gedeelte vertegenwoordigt een pseudo-klasse die een specifieke staat of voorwaarde aangeeft.
  • : wordt gebruikt om pseudo-klassen te selecteren.

Veelgebruikte Pseudo-klassen

:hover 

1a:hover {
2    color: red;
3}
  • :hover past stijlen toe wanneer de muiscursor over een element beweegt.
  • In dit voorbeeld verandert de tekstkleur naar rood wanneer de muis over een link beweegt.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus past stijlen toe wanneer een element focus krijgt. Het wordt voornamelijk gebruikt voor formelementen en links.
  • In dit voorbeeld verschijnt er een blauwe omtreklijn wanneer een input element focus krijgt.

:active 

1button:active {
2    background-color: green;
3}
  • :active past stijlen toe op een element wanneer het actief is (tijdens het klikken).
  • In dit voorbeeld verandert de achtergrondkleur naar groen terwijl op de knop wordt geklikt.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • De pseudo-class :empty wordt gebruikt om stijlen toe te passen op elementen die geen kinderen hebben. Het doelelement mag geen tekstknooppunten, witruimtes of opmerkingen bevatten.
  • In dit voorbeeld wordt een grijze achtergrond en een zwarte stippellijnrand toegepast op een element met de box-klasse als het niets bevat. Als er witruimte aanwezig is, wordt de stijl niet toegepast.

: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 is een stijl die wordt toegepast op formulieritems met geldige invoerwaarden. De stijl :valid wordt toegepast wanneer de voorwaarden gespecificeerd door HTML-attributen zoals pattern of type (bijvoorbeeld email) zijn vervuld.

  • :invalid is een stijl die wordt toegepast op formulieritems met ongeldige invoerwaarden. De stijl :invalid wordt toegepast wanneer een formulieritem niet voldoet aan de HTML-validatieregels (bijvoorbeeld type="email").

  • In dit voorbeeld wordt een groene rand weergegeven als de ingevoerde tekst 5 of meer tekens lang is, zoals gespecificeerd door het pattern-attribuut. Als de ingevoerde tekst minder dan 5 tekens bevat, wordt een rode rand weergegeven.

: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 is een stijl die wordt toegepast wanneer een numerieke invoerelement een waarde bevat binnen een gespecificeerde reeks. De stijl :in-range wordt toegepast wanneer aan de voorwaarden gespecificeerd door de min- en max-attributen in HTML wordt voldaan.

  • :out-of-range is een stijl die wordt toegepast wanneer een numerieke invoerelement een waarde bevat buiten de gespecificeerde reeks. De stijl :out-of-range wordt toegepast wanneer de waarde de reeks gespecificeerd door de min- of max-attributen overschrijdt.

  • In dit voorbeeld, wanneer een waarde binnen de reeks gespecificeerd door de attributen min="18" en max="99" (18 tot en met 99) wordt ingevoerd, wordt een blauwe rand weergegeven. Wanneer een waarde buiten de reeks wordt ingevoerd, wordt een oranje rand weergegeven.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() past stijlen toe op basis van de positie van een kindelement binnen de ouder. Je kunt een nummer of een expressie opgeven voor n.
  • In dit voorbeeld wordt de tekst van het tweede lijstitem blauw.
Toepassen op oneven en even elementen 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Door even of odd op te geven, kun je stijlen toepassen op respectievelijk even of oneven elementen.
  • In dit voorbeeld worden verschillende achtergrondkleuren toegepast op even en oneven rijen. Dit kan bijvoorbeeld worden gebruikt voor gestreepte tabelontwerpen.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child past stijlen toe op het eerste kindelement van een ouder.
  • In dit voorbeeld wordt de tekst van het eerste small-element vetgedrukt met een blauwtint.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child past stijlen toe op het laatste kindelement van een ouder.
  • In dit voorbeeld wordt de tekst van het laatste small-element vetgedrukt met een groentint.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • De pseudo-class :has() in CSS werkt als een ouderselector. Met deze pseudo-class kun je een ouderelement selecteren op basis van de aanwezigheid van kindelementen.
  • In dit voorbeeld wordt de rand toegepast op p-elementen die span-elementen bevatten met de .child-klasse.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() past stijlen toe op elementen die niet aan specifieke voorwaarden voldoen.
  • In dit voorbeeld wordt de tekst van q-elementen, behalve die met de klasse quote2, vetgedrukt met een blauwtint.

: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}
  • De pseudo-class :where() is een speciale CSS-selector die de specificiteit op nul zet. Dit is handig wanneer je meerdere selectors gezamenlijk wilt behandelen en stijlen wilt toepassen zonder de specificiteit van de geselecteerde elementen te beïnvloeden.
  • De pseudo-class :is() groepeert meerdere selectors en selecteert elementen die aan een van de voorwaarden voldoen. De pseudo-class :is() heeft dezelfde specificiteit als normale selectors, maar past stijlen toe op basis van de hoogste specificiteit van de interne selectors.
  • In dit voorbeeld worden :where() en :is() gebruikt om stijlen toe te passen op <p>-elementen en <span>-elementen binnen de detail-klasse. De text-decoration-stijl die door :where() is ingesteld, wordt overschreven door daaropvolgende CSS. De stijl die door :is() is ingesteld, heeft echter een hogere specificiteit en wordt niet overschreven door daaropvolgende CSS.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked past stijlen toe wanneer een selectievakje of keuzerondje is geselecteerd.
  • In dit voorbeeld wordt een rode rand weergegeven op het geselecteerde invoerelement.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled past stijlen toe op uitgeschakelde formulier-elementen.
  • In dit voorbeeld worden een grijze achtergrond en een 'niet-toegestaan'-cursor toegepast op de uitgeschakelde knop.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited wordt gebruikt om stijlen toe te passen op bezochte links.
  • In dit voorbeeld verandert de tekstopmaak van het <a>-element naar paars nadat de link is bezocht.
Privacy en Stijlbeperkingen

:visited heeft enkele stijlbeperkingen om privacyredenen te beschermen. Dit voorkomt dat externe websites het bezoekgeschiedenis van de gebruiker kunnen achterhalen. De eigenschappen die gewijzigd kunnen worden met :visited zijn beperkt tot de volgende:.

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

Aan de andere kant kunnen andere eigenschappen (zoals display, visibility, position, enz.) niet worden gewijzigd met :visited. Dit voorkomt dat de privacy van de gebruiker wordt aangetast via het bezoekgeschiedenis.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type selecteert het eerste element van zijn type (met dezelfde tagnaam) binnen het ouder element.
  • In dit voorbeeld wordt de tekst van het eerste <var>-element en <code>-element in de first-example-klasse weergegeven in vet blauw.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type selecteert het laatste element van zijn type binnen het ouder element.
  • In dit voorbeeld wordt de tekst van het laatste <var>-element en <code>-element in de last-example-klasse weergegeven in vet groen.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() past stijlen toe op de n-de voorkoming van elementen van hetzelfde type.
  • In dit voorbeeld wordt de tekst van het tweede <var>-element en <code>-element in de nth-example-klasse weergegeven in vet oranje.

Pseudo-elementen

Pseudo-elementen in CSS worden gebruikt om stijlen toe te passen op specifieke delen van het geselecteerde element. In tegenstelling tot pseudo-klassen richten pseudo-elementen zich op specifieke delen van een element in plaats van op het hele element. Bijvoorbeeld, ze worden gebruikt om inhoud toe te voegen vóór of na een element of om stijlen toe te passen op specifieke tekens of regels.

Basis syntaxis van pseudo-elementen

Pseudo-elementen worden meestal geschreven met :: (dubbele dubbelepunt) na de selector. Dit om ze te onderscheiden van pseudo-klassen.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector is het doelelement.
  • Het pseudo-element-gedeelte vertegenwoordigt een pseudo-element dat verwijst naar een specifiek onderdeel of aspect van een element.
  • Je kunt een pseudo-element specificeren door :: te gebruiken.

Vaak gebruikte pseudo-elementen

::before 

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

  • ::before voegt virtuele inhoud toe vóór de inhoud van een element en past stijlen toe op dat deel. Het is bijvoorbeeld handig om iconen of labels in te voegen.

  • In dit voorbeeld wordt de tekst "Note:" vóór <span>-elementen met de klasse note ingevoegd. De hier opgegeven inhoud bestaat niet in de daadwerkelijke HTML; deze wordt virtueel toegevoegd via CSS. Dit betekent dat je de toegevoegde inhoud niet direct kunt manipuleren met JavaScript, enzovoort.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after voegt virtuele inhoud toe na de inhoud van een element. Het wordt meestal gebruikt om aanvullende of decoratieve inhoud toe te voegen na een element.
  • In dit voorbeeld wordt een gouden sterpictogram toegevoegd na het <span>-element met de five-stars-klasse.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Het ::placeholder-pseudo-element wordt gebruikt om de placeholder-tekst in formulierelementen te stijlen. Standaard wordt het meestal weergegeven in lichtgrijze tekst, maar met het ::placeholder-pseudo-element kun je de stijl aanpassen aan je ontwerp.
  • In dit voorbeeld wordt de placeholder-tekstkleur voor het input-element ingesteld op 70% transparant blauw, de lettergrootte op 14px, en cursief weergegeven.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter past een stijl toe op de eerste letter van een blokniveau-element. Het wordt gebruikt voor typografische effecten zoals die in tijdschriften of kranten, waarbij de eerste letter wordt benadrukt. Let op dat dit pseudo-element alleen effectief is op blokniveau-elementen en niet direct kan worden toegepast op inline-elementen zoals <span>.
  • In dit voorbeeld zal de eerste letter van de alinea tweemaal zo groot, vet en blauw zijn.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line past een stijl toe op de eerste regel van een blokelement. Het wordt met name gebruikt voor tekstparagrafen, waarmee je verschillende stijlen kunt toepassen op de eerste regel.
  • In dit voorbeeld zal de eerste regel van de paragraaf vet en groen zijn.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection past stijlen toe op het deel van de tekst dat door de gebruiker wordt geselecteerd (gemarkeerd). Hiermee kun je de achtergrondkleur en de tekstkleur veranderen wanneer de tekst is geselecteerd.
  • In dit voorbeeld wordt, wanneer de tekst van een <span>-element is geselecteerd, de achtergrond geel en de tekst zwart.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Speciale tekens en functies in CSSCSS `@` Regels