Articles
Einführung in CSS
CSS Pseudo-Klassen und Pseudo-Elemente

CSS Pseudo-Klassen und Pseudo-Elemente

Dieser Artikel erklärt CSS-Pseudoklassen und Pseudoelemente.

Sie können etwas über Pseudoklassen wie :hover und Pseudoelemente wie ::before lernen.

YouTube Video

HTML zur Vorschau

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-Pseudoklassen sind Funktionen, die Stilelemente basierend auf bestimmten Bedingungen wie Elementzuständen oder Hierarchien anwenden. Sie ermöglichen es, spezielle Stile basierend auf Zuständen oder Positionen von Elementen hinzuzufügen. Dies ist nützlich zur Darstellung dynamischer Situationen, die nicht durch reguläre Klassen oder IDs angegeben werden können. Pseudoklassen erleichtern die Implementierung dynamischer Benutzeroberflächen und Stile basierend auf bestimmten Bedingungen und ermöglichen ein Design, das auf Benutzerinteraktionen oder Inhaltsstrukturen reagiert.

Grundsyntax von Pseudo-Klassen

Die grundlegende Syntax von Pseudoklassen sieht wie folgt aus.

1selector:pseudo-class {
2    /* Styles */
3}
  • selektor ist das Zielelement.
  • Der Teil pseudoklasse steht für eine Pseudoklasse, die einen bestimmten Zustand oder eine bestimmte Bedingung angibt.
  • : wird verwendet, um Pseudo-Klassen auszuwählen.

Häufig verwendete Pseudo-Klassen

:hover 

1a:hover {
2    color: red;
3}
  • :hover wendet Stile an, wenn der Mauszeiger über ein Element schwebt.
  • In diesem Beispiel ändert sich die Textfarbe eines Links in Rot, wenn die Maus darüber schwebt.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus wendet Stile an, wenn ein Element den Fokus erhält. Es wird hauptsächlich für Formularelemente und Links verwendet.
  • In diesem Beispiel erscheint eine blaue Umrandung, wenn ein input-Element fokussiert wird.

:active 

1button:active {
2    background-color: green;
3}
  • :active wendet Stile auf ein Element an, wenn es aktiv ist (während darauf geklickt wird).
  • In diesem Beispiel ändert sich die Hintergrundfarbe eines Buttons zu Grün, während darauf geklickt wird.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • Die Pseudoklasse :empty wird verwendet, um Stile auf Elemente ohne Kinder anzuwenden. Das Zielelement darf keine Textknoten, Leerzeichen oder Kommentare enthalten.
  • In diesem Beispiel wird einem Element mit der Klasse box, das nichts enthält, ein grauer Hintergrund und eine schwarze gestrichelte Umrandung zugewiesen. Wenn Leerzeichen vorhanden sind, wird der Stil nicht angewendet.

: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 ist ein Stil, der auf Formularelemente mit gültigen Eingabewerten angewendet wird. Der :valid-Stil wird angewendet, wenn die durch HTML-Attribute wie pattern oder type (z. B. email) angegebenen Bedingungen erfüllt sind.

  • :invalid ist ein Stil, der auf Formularelemente mit ungültigen Eingabewerten angewendet wird. Der :invalid-Stil wird angewendet, wenn ein Formularelement die HTML-Validierungsregeln nicht erfüllt (z. B. type="email").

  • In diesem Beispiel wird ein grüner Rahmen angezeigt, wenn der eingegebene Text 5 oder mehr Zeichen lang ist, wie durch das pattern-Attribut angegeben. Wenn der eingegebene Text weniger als 5 Zeichen lang ist, wird ein roter Rahmen angezeigt.

: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 ist ein Stil, der angewendet wird, wenn ein numerisches Eingabeelement einen Wert innerhalb eines angegebenen Bereichs enthält. Der :in-range-Stil wird angewendet, wenn die durch die min- und max-Attribute in HTML angegebenen Bedingungen erfüllt sind.

  • :out-of-range ist ein Stil, der angewendet wird, wenn ein numerisches Eingabeelement einen Wert außerhalb des angegebenen Bereichs enthält. Der :out-of-range-Stil wird angewendet, wenn der Wert den durch die min- oder max-Attribute angegebenen Bereich überschreitet.

  • In diesem Beispiel wird ein blauer Rahmen angezeigt, wenn ein Wert innerhalb des durch die Attribute min="18" und max="99" angegebenen Bereichs (18 bis 99 einschließlich) eingegeben wird. Wenn ein Wert außerhalb des Bereichs eingegeben wird, wird ein orangefarbener Rahmen angezeigt.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() wendet Stile basierend auf der Position eines Kindelements innerhalb seines übergeordneten Elements an. Sie können eine Zahl oder einen Ausdruck für n angeben.
  • In diesem Beispiel wird der Text des zweiten Listenelements blau.
Anwendung auf ungerade und gerade Elemente 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Indem Sie even oder odd angeben, können Sie Stile auf ungerade oder gerade Elemente anwenden.
  • In diesem Beispiel werden unterschiedliche Hintergrundfarben auf gerade und ungerade Zeilen angewendet. Dies kann zum Beispiel für gestreifte Tabellendesigns verwendet werden.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child wendet Stile auf das erste Kindelement eines Elternteils an.
  • In diesem Beispiel wird der Text des ersten small-Elements fett in einem Blauton dargestellt.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child wendet Stile auf das letzte Kindelement eines Elternteils an.
  • In diesem Beispiel wird der Text des letzten small-Elements fett in einem Grünton dargestellt.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • Die CSS-Pseudoklasse :has() funktioniert als Elternelement-Selektor. Mit dieser Pseudoklasse können Sie ein Elternelement anhand der vorhandenen Kindelemente auswählen.
  • In diesem Beispiel wird der Rahmen auf p-Elemente angewendet, die span-Elemente mit der .child-Klasse enthalten.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() wendet Stile auf Elemente an, die bestimmte Bedingungen nicht erfüllen.
  • In diesem Beispiel wird der Text von q-Elementen, außer denen mit der Klasse quote2, fett in einem Blauton dargestellt.

: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}
  • Die Pseudoklasse :where() ist ein spezieller CSS-Selektor, der die Spezifität auf null setzt. Dies ist nützlich, wenn Sie mehrere Selektoren gemeinsam behandeln und Stile anwenden möchten, ohne die Spezifität der ausgewählten Elemente zu beeinflussen.
  • Die Pseudoklasse :is() gruppiert mehrere Selektoren und wählt Elemente aus, die eine der Bedingungen erfüllen. Die Pseudoklasse :is() hat die gleiche Spezifität wie normale Selektoren, wendet Stile jedoch basierend auf der höchsten Spezifität ihrer internen Selektoren an.
  • In diesem Beispiel werden :where() und :is() verwendet, um Stile auf <p>-Elemente und <span>-Elemente innerhalb der Klasse detail anzuwenden. Der durch :where() gesetzte text-decoration-Stil wird durch nachfolgendes CSS überschrieben. Der durch :is() gesetzte Stil hat jedoch eine höhere Spezifität und wird nicht durch nachfolgendes CSS überschrieben.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked wendet Stile an, wenn ein Kontrollkästchen oder ein Optionsfeld ausgewählt ist.
  • In diesem Beispiel wird eine rote Umrandung auf dem markierten Eingabeelement angezeigt.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled wendet Stile auf deaktivierte Formularelemente an.
  • In diesem Beispiel wird ein grauer Hintergrund und ein 'nicht erlaubt'-Cursor auf den deaktivierten Button angewendet.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited wird verwendet, um Stile auf besuchte Links anzuwenden.
  • In diesem Beispiel ändert sich nach dem Anklicken und Besuchen eines Links die Textfarbe des <a>-Elements zu lila.
Datenschutz- und Stilbeschränkungen

:visited unterliegt aus Datenschutzgründen einigen Stilbeschränkungen. Dies verhindert, dass externe Websites auf den Verlauf der besuchten Seiten des Benutzers schließen können. Die Eigenschaften, die mit :visited geändert werden können, sind auf die folgenden beschränkt:.

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

Andererseits können Eigenschaften außer diesen (z.B. display, visibility, position, etc.) nicht mit :visited geändert werden. Dies verhindert, dass die Privatsphäre der Benutzer durch den Besuchsverlauf preisgegeben wird.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type wählt das erste Element seines Typs (mit demselben Tag-Namen) innerhalb seines Elternelements aus.
  • In diesem Beispiel wird der Text des ersten <var>-Elements und <code>-Elements in der Klasse first-example fett und blau formatiert.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type wählt das letzte Element seines Typs innerhalb seines Elternelements aus.
  • In diesem Beispiel wird der Text des letzten <var>-Elements und <code>-Elements in der Klasse last-example fett und grün formatiert.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() wendet Stile auf das n-te Vorkommen von Elementen desselben Typs an.
  • In diesem Beispiel wird der Text des zweiten <var>-Elements und <code>-Elements in der Klasse nth-example fett und orange formatiert.

Pseudo-Elemente

Pseudo-Elemente in CSS werden verwendet, um Stile auf bestimmte Teile des ausgewählten Elements anzuwenden. Im Gegensatz zu Pseudo-Klassen konzentrieren sich Pseudo-Elemente auf bestimmte Teile eines Elements, anstatt auf das gesamte Element. Zum Beispiel werden sie verwendet, um Inhalte vor oder nach einem Element hinzuzufügen oder Stile auf bestimmte Zeichen oder Zeilen anzuwenden.

Grundsyntax von Pseudo-Elementen

Pseudo-Elemente werden normalerweise mit :: (doppelter Doppelpunkt) nach dem Selektor geschrieben. Dies dient dazu, sie von Pseudo-Klassen zu unterscheiden.

1selector::pseudo-element {
2    /* Styles */
3}
  • selektor ist das Zielelement.
  • Der pseudo-element-Teil stellt ein Pseudo-Element dar, das sich auf einen bestimmten Teil oder Aspekt eines Elements bezieht.
  • Sie können ein Pseudo-Element durch Verwendung von :: angeben.

Häufig verwendete Pseudo-Elemente

::before 

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

  • ::before fügt virtuellen Inhalt vor dem Inhalt eines Elements ein und wendet Stile auf diesen Teil an. Es ist nützlich, um beispielsweise Symbole oder Beschriftungen einzufügen.

  • In diesem Beispiel wird der Text "Hinweis:" vor <span>-Elemente mit der Klasse note eingefügt. Der hier angegebene Inhalt existiert nicht im eigentlichen HTML; er wird virtuell durch CSS hinzugefügt. Das bedeutet, dass Sie Inhalte, die über JavaScript usw. hinzugefügt werden, nicht direkt manipulieren können.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after fügt virtuellen Inhalt nach dem Inhalt eines Elements ein. Es wird typischerweise verwendet, um ergänzenden oder dekorativen Inhalt nach einem Element hinzuzufügen.
  • In diesem Beispiel wird ein goldenes Sternsymbol nach dem <span>-Element mit der Klasse five-stars hinzugefügt.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Das Pseudoelement ::placeholder wird verwendet, um den Platzhaltertext in Formularelementen zu gestalten. Standardmäßig wird er normalerweise in hellgrauem Text angezeigt, aber mit dem Pseudoelement ::placeholder können Sie die Gestaltung an Ihr Design anpassen.
  • In diesem Beispiel wird die Platzhaltertextfarbe für das input-Element auf 70 % transparentes Blau gesetzt, die Schriftgröße auf 14px und kursiv formatiert.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter wendet einen Stil auf den ersten Buchstaben eines Block-Elements an. Es wird für typografische Effekte verwendet, wie sie in Zeitschriften oder Zeitungen zu sehen sind, bei denen der erste Buchstabe hervorgehoben wird. Beachten Sie, dass dieses Pseudoelement nur bei Block-Elementen wirksam ist und nicht direkt auf Inline-Elemente wie <span> angewendet werden kann.
  • In diesem Beispiel ist der erste Buchstabe des Absatzes doppelt so groß, fett und blau.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line wendet einen Stil auf die erste Zeile eines Block-Elements an. Es wird besonders für Textabsätze verwendet und ermöglicht es, unterschiedliche Stile für die erste Zeile anzuwenden.
  • In diesem Beispiel wird die erste Zeile des Absatzes fett und grün dargestellt.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection wendet Stile auf den Teil des Textes an, der vom Benutzer ausgewählt (markiert) wird. Damit können Sie die Hintergrundfarbe und die Textfarbe ändern, wenn der Text ausgewählt wird.
  • In diesem Beispiel wird der Hintergrund gelb und der Text schwarz, wenn der Text eines <span>-Elements ausgewählt wird.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Sonderzeichen und Funktionen in CSSCSS-`@`-Regeln