Articles
Introduktion till CSS
CSS Pseudo-klasser och Pseudo-element

CSS Pseudo-klasser och Pseudo-element

Den här artikeln förklarar CSS pseudo-klasser och pseudo-element.

Du kan lära dig om pseudo-klasser som :hover och pseudo-element som ::before.

YouTube Video

HTML för förhandsgranskning

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

CSS pseudo-klasser är funktioner som applicerar stilar på element baserat på specifika villkor som elementets tillstånd eller hierarki. De låter dig lägga till speciella stilar baserat på elementets tillstånd eller positioner, vilket är användbart för att representera dynamiska situationer som inte kan specificeras med vanliga klasser eller ID:n. Pseudo-klasser gör det enkelt att implementera dynamiska användargränssnitt och styling baserat på specifika villkor, vilket möjliggör design som reagerar på användarinteraktioner eller innehållsstruktur.

Grundsyntax för pseudo-klasser

Den grundläggande syntaxen för pseudo-klasser är följande.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector är det målade elementet.
  • pseudo-class-delen representerar en pseudo-klass som anger ett specifikt tillstånd eller villkor.
  • : används för att välja pseudo-klasser.

Vanligt använda pseudo-klasser

:hover 

1a:hover {
2    color: red;
3}
  • :hover applicerar stilar när muspekaren svävar över ett element.
  • I det här exemplet ändras textfärgen till röd när musen svävar över en länk.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus applicerar stilar när ett element får fokus. Den används främst för formulärelement och länkar.
  • I det här exemplet visas en blå kontur när ett input-element är i fokus.

:active 

1button:active {
2    background-color: green;
3}
  • :active applicerar stilar på ett element när det är aktivt (när det klickas).
  • I det här exemplet ändras bakgrundsfärgen till grön medan knappen trycks ned.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • :empty-pseudoklassen används för att applicera stilar på element som saknar barn. Det målade elementet får inte innehålla textnoder, mellanslag eller kommentarer.
  • I det här exemplet tillämpas en grå bakgrund och en svart streckad kant på ett element med klassen box om det inte innehåller något. Om mellanslag finns tillämpas inte stilen.

: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 är en stil som tillämpas på formulärelement med giltiga inmatningsvärden. :valid-stilen tillämpas när villkor specificerade av HTML-attribut som pattern eller type (t.ex. email) uppfylls.

  • :invalid är en stil som tillämpas på formulärelement med ogiltiga inmatningsvärden. :invalid-stilen tillämpas när ett formulärelement inte uppfyller HTML-valideringsregler (t.ex. type="email").

  • I detta exempel visas en grön kant om den inmatade texten är 5 eller fler tecken lång, enligt vad som anges av pattern-attributet. Om den inmatade texten är mindre än 5 tecken visas 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 är en stil som används när ett numeriskt inmatningselement har ett värde inom ett specificerat intervall. :in-range-stilen tillämpas när villkoren som specificerats av min- och max-attributen i HTML uppfylls.

  • :out-of-range är en stil som används när ett numeriskt inmatningselement har ett värde utanför det specificerade intervallet. :out-of-range-stilen tillämpas när värdet överstiger intervallet som specificerats av min- eller max-attributen.

  • I detta exempel, när ett värde inom intervallet som specificerats av attributen min="18" och max="99" (18 till 99 inklusive) anges, visas en blå ram. När ett värde utanför intervallet anges, visas en orange ram.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child()-pseudoklassen applicerar stilar baserat på positionen av ett barnelement inom sin förälder. Du kan ange ett nummer eller ett uttryck för n.
  • I det här exemplet blir texten för det andra listobjektet blå.
Tillämpning på udda och jämna element 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Genom att ange even eller odd kan du applicera stilar på jämna eller udda element.
  • I det här exemplet appliceras olika bakgrundsfärger på jämna och udda rader. Detta kan exempelvis användas för randiga tabellformat.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child-pseudoklassen applicerar stilar på det första barnelementet i en förälder.
  • I det här exemplet är texten i det första small-elementet formaterad som fetstil med en nyans av blått.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child-pseudoklassen applicerar stilar på det sista barnelementet i en förälder.
  • I det här exemplet är texten i det sista small-elementet formaterad som fetstil med en nyans av grönt.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • :has()-pseudoklassen i CSS fungerar som en föräldraselektor. Med denna pseudoklass kan du välja ett föräldraelement baserat på närvaro av barnelement.
  • I det här exemplet tillämpas border på p-element som innehåller span-element med .child-klassen.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not()-pseudoklassen applicerar stilar på element som inte uppfyller specifika villkor.
  • I det här exemplet är texten i q-elementen, förutom de med klassen quote2, formaterad som fetstil med en nyans 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()-pseudoklassen är en speciell CSS-selektor som sätter specificiteten till noll. Detta är användbart när du vill hantera flera selektorer tillsammans och applicera stilar utan att påverka specificiteten för de valda elementen.
  • :is()-pseudoklassen grupperar flera selektorer och väljer element som matchar något av villkoren. :is()-pseudoklassen har samma specificitet som vanliga selektorer, men applicerar stilar baserat på den högsta specificiteten bland sina interna selektorer.
  • I det här exemplet används :where() och :is() för att tillämpa stilar på <p>-element och <span>-element inom klassen detail. Stilen text-decoration som anges av :where() åsidosätts av efterföljande CSS. Stilen som anges av :is() har dock en högre specificitet och åsidosätts inte av efterföljande CSS.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked tillämpar stilar när en kryssruta eller radioknapp är vald.
  • I det här exemplet visas en röd kant runt det markerade inmatningselementet.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled tillämpar stilar på inaktiverade formulärelement.
  • I det här exemplet tillämpas en grå bakgrund och en 'not-allowed'-markör på den inaktiverade knappen.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited används för att tillämpa stilar på besökta länkar.
  • I det här exemplet ändras textfärgen på <a>-elementet till lila efter att ha klickat och besökt länken.
Integritet och stilbegränsningar

:visited har vissa stilbegränsningar av integritetsskäl. Detta förhindrar externa webbplatser från att utläsa användarens besökslogg. Egenskaper som kan ändras med :visited är begränsade till följande:.

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

Däremot kan egenskaper som inte tillhör denna lista (t.ex. display, visibility, position osv.) inte ändras med :visited. Detta skyddar användarens integritet genom att hindra läckage av besökslogg.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type väljer det första elementet av sin typ (med samma taggnamn) inom överordnat element.
  • I det här exemplet är texten i det första <var>-elementet och <code>-elementet i first-example-klassen formaterad med fet blå.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type väljer det sista elementet av sin typ inom överordnat element.
  • I det här exemplet är texten i det sista <var>-elementet och <code>-elementet i last-example-klassen formaterad med fet grön.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() tillämpar stilar på det n:te förekomsten av element av samma typ.
  • I det här exemplet är texten i det andra <var>-elementet och <code>-elementet i nth-example-klassen formaterad med fet orange.

Pseudo-element

Pseudo-element i CSS används för att tillämpa stilar på specifika delar av det valda elementet. Till skillnad från pseudo-klasser fokuserar pseudo-element på specifika delar av ett element snarare än hela elementet. Till exempel används de för att lägga till innehåll före eller efter ett element eller för att tillämpa stilar på specifika tecken eller rader.

Grundsyntax för pseudo-element

Pseudo-element skrivs vanligtvis med :: (dubbel kolon) efter selektorn. Detta är för att skilja dem från pseudo-klasser.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector är det målade elementet.
  • pseudo-element-delen representerar ett pseudo-element som hänvisar till en specifik del eller aspekt av ett element.
  • Du kan specificera ett pseudo-element genom att använda ::.

Vanligt Använda Pseudo-element

::before 

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

  • ::before lägger till virtuellt innehåll före ett elements innehåll och tillämpar stilar på den delen. Det är användbart för att till exempel infoga ikoner eller etiketter.

  • I det här exemplet infogas texten "Note:" före <span>-element med klassen note. Innehållet som anges här finns inte i den faktiska HTML-koden; det läggs till virtuellt genom CSS. Detta innebär att du inte kan manipulera innehåll som läggs till via JavaScript eller liknande direkt.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after lägger till virtuellt innehåll efter ett elements innehåll. Det används vanligtvis för att lägga till kompletterande eller dekorativt innehåll efter ett element.
  • I det här exemplet läggs en guldstjärnikon till 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}
  • ::placeholder-pseudoelementet används för att styla platshållartexten i formulärelement. Som standard visas det vanligtvis i ljusgrå text, men med ::placeholder-pseudoelementet kan du ändra stilen för att matcha din design.
  • I det här exemplet sätts färgen på platshållartexten för input-elementet till en 70% genomskinlig blå, teckenstorleken till 14px och texten kursiveras.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter tillämpar stil på den första bokstaven i ett blockelement. Det används för typografiska effekter som de som ses i tidningar eller tidskrifter, där den första bokstaven betonas. Observera att detta pseudo-element endast fungerar på blockelement och inte kan tillämpas direkt på inline-element som <span>.
  • I det här exemplet kommer den första bokstaven i stycket att vara dubbelt så stor, fetstil och blå.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line tillämpar stil på den första raden i ett blockelement. Det används särskilt för textstycken och låter dig tillämpa olika stilar på första raden.
  • I det här exemplet blir den första raden i stycket fetstil och grön.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection tillämpar stilar på den del av texten som användaren markerar (markerad text). Med detta kan du ändra bakgrundsfärg och textfärg när texten markeras.
  • I det här exemplet, när texten i ett <span>-element markeras, blir bakgrunden gul och texten svart.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Speciella tecken och funktioner i CSSCSS `@`-regler