Articles
Introduksjon til CSS
CSS Pseudoklasser og Pseudo-elementer

CSS Pseudoklasser og Pseudo-elementer

Denne artikkelen forklarer CSS-pseudoklasser og pseudo-elementer.

Du kan lære om pseudoklasser som :hover og pseudo-elementer som ::before.

YouTube Video

HTML for 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 funksjoner som anvender stiler på elementer basert på bestemte forhold som elementtilstander eller hierarki. De lar deg legge til spesielle stiler basert på elementtilstander eller posisjoner, noe som gjør det nyttig for å representere dynamiske situasjoner som ikke kan spesifiseres med vanlige klasser eller ID-er. Pseudoklasser gjør det enkelt å implementere dynamiske brukergrensesnitt og styling basert på spesifikke forhold, slik at designet reagerer på brukerinteraksjon eller innholdsstruktur.

Grunnleggende Syntaks for Pseudoklasser

Den grunnleggende syntaksen for pseudoklasser er som følger.

1selector:pseudo-class {
2    /* Styles */
3}
  • selektor er målobjektet.
  • pseudo-klasse-delen representerer en pseudoklasse som indikerer en spesifikk tilstand eller et forhold.
  • : brukes for å velge pseudoklasser.

Vanlig Brukte Pseudoklasser

:hover 

1a:hover {
2    color: red;
3}
  • :hover anvender stiler når musepekeren svever over et element.
  • I dette eksempelet endres tekstfargen til rød når musen svever over en lenke.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus anvender stiler når et element får fokus. Det brukes hovedsakelig for skjemaelementer og lenker.
  • I dette eksempelet vises en blå ramme når et input-element er fokusert.

:active 

1button:active {
2    background-color: green;
3}
  • :active anvender stiler på et element når det er aktivt (mens det klikkes).
  • I dette eksempelet, mens knappen blir klikket på, endres bakgrunnsfargen til grønn.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • :empty pseudo-klassen brukes til å legge til stiler på elementer som ikke har noen barn. Målelementet må ikke inneholde tekstnoder, mellomrom eller kommentarer.
  • I dette eksempelet, hvis et element med box-klassen ikke inneholder noe, får det en grå bakgrunn og en svart stiplet kantlinje. Hvis det er mellomrom, blir ikke stilen brukt.

: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 som brukes på skjemaelementer med gyldige inndataverdier. :valid-stilen brukes når betingelsene angitt av HTML-attributter som pattern eller type (f.eks. email) er oppfylt.

  • :invalid er en stil som brukes på skjemaelementer med ugyldige inndataverdier. :invalid-stilen brukes når et skjemaelement ikke oppfyller HTML-valideringsregler (f.eks. type="email").

  • I dette eksempelet vises en grønn kantlinje hvis teksten som er skrevet inn, er 5 eller flere tegn lang, som spesifisert av pattern-attributtet. Hvis teksten som er skrevet inn, er mindre enn 5 tegn, vises en rød kantlinje.

: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 som brukes når et numerisk inndataelement har en verdi innenfor et spesifisert område. :in-range-stilen brukes når betingelsene spesifisert av min- og max-attributtene i HTML er oppfylt.

  • :out-of-range er en stil som brukes når et numerisk inndataelement har en verdi utenfor det spesifiserte området. :out-of-range-stilen brukes når verdien overstiger rekkevidden spesifisert av min- eller max-attributtene.

  • I dette eksemplet, når en verdi innenfor området spesifisert av min="18" og max="99"-attributtene (inkludert 18 til 99) legges inn, vises en blå kantlinje. Når en verdi utenfor området legges inn, vises en oransje kantlinje.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() brukes til å legge til stiler basert på posisjonen til et barnelement innenfor sin forelder. Du kan angi et tall eller et uttrykk for n.
  • I dette eksempelet blir teksten i det andre listeelementet blå.
Påføring på like og ulike elementer 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Ved å spesifisere even eller odd, kan du legge til stiler på like eller ulike elementer.
  • I dette eksempelet brukes forskjellige bakgrunnsfarger på like og ulike rader. Dette kan for eksempel brukes til stripete tabelloppsett.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child brukes til å legge til stiler på det første barnelementet til en forelder.
  • I dette eksempelet er teksten i det første small-elementet formatert som fet med en nyanse av blått.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child brukes til å legge til stiler på det siste barnelementet til en forelder.
  • I dette eksempelet er teksten i det siste small-elementet formatert som fet med en nyanse av grønt.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • :has() pseudo-klassen i CSS fungerer som en foreldreselektor. Ved å bruke denne pseudo-klassen kan du velge et overordnet element basert på tilstedeværelsen av barnelementer.
  • I dette eksemplet brukes ramme på p-elementer som inneholder span-elementer med klassen .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() brukes til å legge til stiler på elementer som ikke oppfyller spesifikke betingelser.
  • I dette eksempelet er teksten i q-elementer, unntatt de med quote2-klassen, formatert som fet med en nyanse av blått.

: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 spesiell CSS-selektor som setter spesifisiteten til null. Dette er nyttig når du vil håndtere flere selektorer samlet og bruke stiler uten å påvirke spesifisiteten til de valgte elementene.
  • :is() pseudo-klassen grupperer flere selektorer og velger elementer som oppfyller noen av betingelsene. :is() pseudo-klassen har samme spesifisitet som vanlige selektorer, men den bruker stiler basert på den høyeste spesifisiteten blant sine interne selektorer.
  • I dette eksempelet brukes :where() og :is() til å legge til stiler på <p>-elementer og <span>-elementer innenfor klassen detail. Stilen text-decoration satt av :where() overstyres av påfølgende CSS. Imidlertid har stilen satt av :is() en høyere spesifisitet og overstyres ikke av påfølgende CSS.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked brukes til å legge til stiler når en avkrysningsboks eller radioknapp er valgt.
  • I dette eksempelet vises en rød kantlinje på det valgte inndataelementet.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled brukes til å legge til stiler på deaktiverte skjemaelementer.
  • I dette eksempelet brukes en grå bakgrunn og en 'ikke tillatt'-markør på den deaktiverte knappen.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited brukes til å legge til stiler på besøkte lenker.
  • I dette eksempelet endres tekstfargen til <a>-elementet til lilla etter å ha klikket på og besøkt en lenke.
Personvern og stilbegrensninger

:visited har noen stilbegrensninger av personvernhensyn. Dette forhindrer eksterne nettsteder fra å trekke slutninger om brukerens besøkslogg. Egenskapene som kan endres med :visited er begrenset til følgende:.

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

På den annen side kan ikke andre egenskaper (f.eks. display, visibility, position, osv.) endres med :visited. Dette forhindrer at brukerens personvern blir lekket gjennom besøksloggen.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type velger det første elementet av sin type (med samme tag-navn) innenfor forelderelementet.
  • I dette eksempelet er teksten til det første <var>-elementet og <code>-elementet i klassen first-example stylet med fet blå skrift.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type velger det siste elementet av sin type innenfor forelderelementet.
  • I dette eksempelet er teksten til det siste <var>-elementet og <code>-elementet i klassen last-example stylet med fet grønn skrift.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() brukes til å legge til stiler på det n'te elementet av samme type.
  • I dette eksempelet er teksten til det andre <var>-elementet og <code>-elementet i klassen nth-example stylet med fet oransje skrift.

Pseudo-elementer

Pseudo-elementer i CSS brukes til å legge til stiler på spesifikke deler av det valgte elementet. I motsetning til pseudo-klasser fokuserer pseudo-elementer på spesifikke deler av et element i stedet for hele elementet. For eksempel brukes de til å legge til innhold før eller etter et element eller bruke stiler på spesifikke tegn eller linjer.

Grunnleggende syntaks for pseudo-elementer

Pseudo-elementer skrives vanligvis med :: (dobbel kolon) etter selektoren. Dette er for å skille dem fra pseudo-klasser.

1selector::pseudo-element {
2    /* Styles */
3}
  • selektor er målobjektet.
  • Den pseudo-element delen representerer et pseudo-element som refererer til en spesifikk del eller aspekt av et element.
  • Du kan angi et pseudo-element ved å bruke ::.

Vanlig brukte pseudo-elementer

::before 

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

  • ::before setter inn virtuelt innhold før et elements innhold og bruker stiler på den delen. Det er nyttig for å sette inn ikoner eller etiketter, for eksempel.

  • I dette eksemplet settes teksten "Note:" inn før <span>-elementer med klassen note. Innholdet som spesifiseres her finnes ikke i den faktiske HTML-en; det legges til virtuelt gjennom CSS. Dette betyr at du ikke kan manipulere innhold som legges til via JavaScript, direkte.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after setter inn virtuelt innhold etter et elements innhold. Det brukes vanligvis til å legge til supplerende eller dekorativt innhold etter et element.
  • I dette eksemplet er et gullstjerneikon lagt til etter <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}
  • ::placeholder pseudo-elementet brukes til å style plassholderteksten i skjemaelementer. Som standard vises det vanligvis som lys grå tekst, men med ::placeholder pseudo-elementet kan du endre stilen for å matche designet ditt.
  • I dette eksemplet er plassholdertekstfargen til input-elementet satt til en 70% transparent blåfarge, skriftstørrelse til 14px, og kursiv.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter bruker stil på den første bokstaven i et blokk-nivå element. Det brukes til typografiske effekter som de man ser i magasiner eller aviser, der den første bokstaven er fremhevet. Merk at dette pseudo-elementet kun fungerer på blokk-nivå elementer og ikke kan brukes direkte på inline-elementer som <span>.
  • I dette eksemplet vil den første bokstaven i avsnittet være dobbel størrelse, fet og blå.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line bruker stil på den første linjen i et blokk-element. Det brukes spesielt for tekstavsnitt, slik at du kan anvende forskjellige stiler på den første linjen.
  • I dette eksemplet vil den første linjen i avsnittet være fet og grønn.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection bruker stiler på den delen av teksten som er valgt (markert) av brukeren. Med dette kan du endre bakgrunnsfargen og tekstfargen når teksten er valgt.
  • I dette eksemplet, når teksten i et <span>-element er valgt, blir bakgrunnen gul og teksten blir svart.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Spesialtegn og funksjoner i CSSCSS-`@`-regler