Articles
Introduktion til CSS
CSS-pseudoklasser og -pseudoelementer

CSS-pseudoklasser og -pseudoelementer

Denne artikel forklarer CSS-pseudoklasser og -pseudoelementer.

Du kan lære om pseudoklasser såsom :hover og pseudoelementer som ::before.

YouTube Video

HTML til forhåndsvisning

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>

Pseudoklasser

CSS-pseudoklasser er funktioner, der anvender styles på elementer baseret på specifikke betingelser såsom elementtilstande eller hierarki. De giver dig mulighed for at tilføje specielle styles baseret på elementtilstande eller positioner, hvilket gør dem nyttige til at repræsentere dynamiske situationer, der ikke kan specificeres ved hjælp af almindelige klasser eller ID'er. Pseudoklasser gør det nemt at implementere dynamiske brugerflader og styling baseret på specifikke betingelser, hvilket gør det muligt at designe, der reagerer på brugerinteraktion eller indholdsstruktur.

Grundlæggende syntaks for pseudoklasser

Den grundlæggende syntaks for pseudoklasser er som følger.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector er det målrettede element.
  • Delen pseudo-class repræsenterer en pseudoklasse, der angiver en specifik tilstand eller betingelse.
  • : anvendes til at vælge pseudoklasser.

Ofte brugte pseudoklasser

:hover 

1a:hover {
2    color: red;
3}
  • :hover anvender styles, når musemarkøren svæver over et element.
  • I dette eksempel ændrer tekstfarven sig til rød, når musen svæver over et link.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus anvender styles, når et element modtager fokus. Det bruges hovedsageligt til form-elementer og links.
  • I dette eksempel vises en blå kantlinje, når et input-element har fokus.

:active 

1button:active {
2    background-color: green;
3}
  • :active anvender styles på et element, når det er aktivt (mens det bliver klikket på).
  • I dette eksempel ændrer baggrundsfarven sig til grøn, mens knappen bliver klikket på.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • :empty pseudo-klassen bruges til at anvende styles på elementer, der ikke har nogen børn. Det målrettede element må ikke indeholde tekstnoder, mellemrum eller kommentarer.
  • I dette eksempel bliver en grå baggrund og en sort stiplet kant anvendt på et element med klassen box, hvis det ikke indeholder noget. Hvis der er mellemrum, bliver stilen ikke anvendt.

: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 er en stil, der anvendes på formelementer med gyldige inputværdier. :valid-stilen anvendes, når betingelser angivet af HTML-attributter som pattern eller type (f.eks. email) er opfyldt.

  • :invalid er en stil, der anvendes på formelementer med ugyldige inputværdier. :invalid-stilen anvendes, når et formelement ikke opfylder HTML-valideringsregler (f.eks. type="email").

  • I dette eksempel vises en grøn kant, hvis den indtastede tekst er 5 eller flere tegn lang, som angivet af pattern-attributten. Hvis den indtastede tekst er mindre end 5 tegn, vises en rød kant.

: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 er en stil, der anvendes, når et numerisk inputelement har en værdi inden for et angivet interval. :in-range-stilen anvendes, når betingelserne angivet af min- og max-attributterne i HTML er opfyldt.

  • :out-of-range er en stil, der anvendes, når et numerisk inputelement har en værdi uden for det angivne interval. :out-of-range-stilen anvendes, når værdien overskrider intervallet angivet af min- eller max-attributterne.

  • I dette eksempel, når en værdi inden for intervallet angivet af min="18" og max="99" (inklusive 18 til 99) indtastes, vises en blå kant. Når en værdi uden for intervallet indtastes, vises en orange kant.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() anvender styles baseret på en børns position inden for dets forældrelement. Du kan specificere et tal eller et udtryk for n.
  • I dette eksempel bliver teksten på det andet listepunkt blå.
Anvendelse på ulige og lige elementer 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Ved at angive even eller odd kan du anvende styles på ulige eller lige elementer.
  • I dette eksempel bliver forskellige baggrundsfarver anvendt på lige og ulige rækker. Dette kan for eksempel bruges til at designe stribede tabeller.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child anvender styles på det første børneelement af et forældreelement.
  • I dette eksempel bliver teksten i det første small element gjort fed og får en blå nuance.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child anvender styles på det sidste børneelement af et forældreelement.
  • I dette eksempel bliver teksten i det sidste small element gjort fed og får en grøn nuance.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • :has() pseudo-klassen i CSS fungerer som en forældervælger. Ved at bruge denne pseudo-klasse kan du vælge et forældreelement baseret på tilstedeværelsen af børneelementer.
  • I dette eksempel anvendes border på p-elementer, der indeholder span-elementer med klassen .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() anvender styles på elementer, der ikke opfylder specifikke kriterier.
  • I dette eksempel bliver teksten på q-elementer, undtagen dem med klassen quote2, gjort fed og får en blå nuance.

: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}
  • :where() pseudo-klassen er en speciel CSS-vælger, der sætter specificiteten til nul. Dette er nyttigt, når du ønsker at håndtere flere vælgere samlet og anvende styles uden at påvirke specificiteten af de valgte elementer.
  • :is() pseudo-klassen grupperer flere vælgere og vælger elementer, der opfylder nogen af betingelserne. :is() pseudo-klassen har samme specificitet som normale vælgere, men anvender styles baseret på den højeste specificitet blandt sine interne vælgere.
  • I dette eksempel bruges :where() og :is() til at anvende styles på <p>-elementer og <span>-elementer inden for detail-klassen. Den text-decoration style, der er sat af :where(), bliver tilsidesat af efterfølgende CSS. Dog har stilen, der er sat af :is(), en højere specificitet og bliver ikke tilsidesat af efterfølgende CSS.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked anvender styles, når en checkbox eller radioknap er valgt.
  • I dette eksempel vises en rød ramme omkring det valgte input-element.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled anvender styles på deaktiverede formelementer.
  • I dette eksempel anvendes en grå baggrund og en 'not-allowed'-cursor på den deaktiverede knap.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited bruges til at anvende styles på besøgte links.
  • I dette eksempel ændres tekstfarven på <a>-elementet til lilla efter at have klikket på og besøgt linket.
Privatliv og style-begrænsninger

:visited har visse style-begrænsninger af hensyn til privatlivsbeskyttelse. Dette forhindrer eksterne sider i at udlede brugerens besøgsoversigt. De egenskaber, der kan ændres med :visited, er begrænset til følgende:.

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

På den anden side kan egenskaber udover disse (f.eks. display, visibility, position osv.) ikke ændres med :visited. Dette forhindrer, at brugerens privatliv afsløres gennem besøgsoversigten.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type vælger det første element af sin type (med samme tag-navn) inden for dets forældre-element.
  • I dette eksempel styles teksten af det første <var>-element og <code>-element i first-example-klassen med fed blå.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type vælger det sidste element af sin type inden for dets forældre-element.
  • I dette eksempel styles teksten af det sidste <var>-element og <code>-element i last-example-klassen med fed grøn.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() anvender styles på det nte element af samme type.
  • I dette eksempel styles teksten af det andet <var>-element og <code>-element i nth-example-klassen med fed orange.

Pseudo-elementer

Pseudo-elementer i CSS bruges til at anvende styles på specifikke dele af det valgte element. I modsætning til pseudo-klasser fokuserer pseudo-elementer på specifikke dele af et element frem for hele elementet. For eksempel bruges de til at tilføje indhold før eller efter et element eller anvende stilarter på specifikke tegn eller linjer.

Grundlæggende syntaks for pseudo-elementer

Pseudo-elementer skrives normalt med :: (dobbelt kolon) efter vælgeren. Dette er for at skelne dem fra pseudo-klasser.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector er det målrettede element.
  • pseudo-element-delen repræsenterer et pseudo-element, der henviser til en specifik del eller et aspekt af et element.
  • Du kan angive et pseudo-element ved at bruge ::.

Almindeligt brugte pseudo-elementer

::before 

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

  • ::before indsætter virtuelt indhold før et elements indhold og anvender stilarter på den del. Det er nyttigt til for eksempel at indsætte ikoner eller etiketter.

  • I dette eksempel indsættes teksten "Note:" før <span>-elementer med klassen note. Indholdet, der er angivet her, eksisterer ikke i den faktiske HTML; det tilføjes virtuelt gennem CSS. Dette betyder, at du ikke direkte kan manipulere med indhold, der er tilføjet via JavaScript osv.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after indsætter virtuelt indhold efter et elements indhold. Det bruges typisk til at tilføje supplerende eller dekorativt indhold efter et element.
  • I dette eksempel tilføjes et gyldent stjerneikon efter <span>-elementet med klassen five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Pseudo-elementet ::placeholder bruges til at style pladsholderteksten i formelementer. Som standard vises det normalt i lys grå tekst, men med pseudo-elementet ::placeholder kan du ændre stilen, så den passer til dit design.
  • I dette eksempel er pladsholdertekstens farve for input-elementet indstillet til 70% transparent blå, skrifttypestørrelsen til 14px og kursiveret.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter anvender stil til det første bogstav i et blokniveau-element. Det bruges til typografiske effekter som dem, der ses i magasiner eller aviser, hvor det første bogstav fremhæves. Bemærk, at dette pseudo-element kun er effektivt på blokniveau-elementer og ikke kan anvendes direkte på inline-elementer som <span>.
  • I dette eksempel vil det første bogstav i afsnittet være dobbelt så stort, fedt og blåt.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line anvender stil på den første linje i et blok-element. Den bruges især til tekstafsnit, så du kan anvende forskellige stilarter på den første linje.
  • I dette eksempel vil den første linje i afsnittet være fed og grøn.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection anvender stilarter på den del af teksten, der er valgt (fremhævet) af brugeren. Med dette kan du ændre baggrundsfarven og tekstfarven, når teksten er valgt.
  • I dette eksempel, når teksten i et <span>-element vælges, bliver baggrunden gul, og teksten bliver sort.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Specialtegn og funktioner i CSSCSS `@` Regler