Articles
Pengenalan ke CSS
Pseudokelas dan Pseudoelemen CSS

Pseudokelas dan Pseudoelemen CSS

Artikel ini menjelaskan pseudo-class dan pseudo-element CSS.

Anda dapat mempelajari pseudo-class seperti :hover dan pseudo-elemen seperti ::before.

YouTube Video

HTML untuk Pratinjau

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>

Pseudokelas

Pseudo-class CSS adalah fungsi yang menerapkan gaya ke elemen berdasarkan kondisi spesifik seperti keadaan elemen atau hierarki. Mereka memungkinkan Anda menambahkan gaya khusus berdasarkan keadaan atau posisi elemen, membuatnya berguna untuk merepresentasikan situasi dinamis yang tidak dapat ditentukan oleh kelas atau ID biasa. Pseudo-class memudahkan penerapan antarmuka pengguna dinamis dan gaya berdasarkan kondisi khusus, memungkinkan desain yang merespons interaksi pengguna atau struktur konten.

Sintaks Dasar Pseudokelas

Sintaks dasar dari pseudo-class adalah sebagai berikut.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector adalah elemen target.
  • Bagian pseudo-class mewakili pseudo-class yang menunjukkan kondisi atau keadaan tertentu.
  • : digunakan untuk memilih pseudo-classes.

Pseudokelas yang Sering Digunakan

:hover 

1a:hover {
2    color: red;
3}
  • :hover menerapkan gaya saat kursor mouse melayang di atas elemen.
  • Dalam contoh ini, ketika mouse melayang di atas tautan, warna teks berubah menjadi merah.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus menerapkan gaya ketika elemen menerima fokus. Ini terutama digunakan untuk elemen formulir dan tautan.
  • Dalam contoh ini, garis luar biru muncul ketika elemen input difokuskan.

:active 

1button:active {
2    background-color: green;
3}
  • :active menerapkan gaya ke elemen ketika elemen itu aktif (saat sedang diklik).
  • Dalam contoh ini, saat tombol diklik, warna latar belakang berubah menjadi hijau.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • Pseudo-class :empty digunakan untuk menerapkan gaya pada elemen yang tidak memiliki anak. Elemen target tidak boleh mengandung node teks, spasi, atau komentar.
  • Dalam contoh ini, jika sebuah elemen dengan class box tidak mengandung apa-apa, maka latar belakang abu-abu dan border hitam putus-putus diterapkan pada elemen tersebut. Jika ada spasi, gaya tidak akan diterapkan.

: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 adalah gaya yang diterapkan pada elemen formulir dengan nilai input yang valid. Gaya :valid diterapkan ketika kondisi yang ditentukan oleh atribut HTML seperti pattern atau type (misalnya, email) terpenuhi.

  • :invalid adalah gaya yang diterapkan pada elemen formulir dengan nilai input yang tidak valid. Gaya :invalid diterapkan ketika elemen formulir tidak memenuhi aturan validasi HTML (misalnya, type="email").

  • Dalam contoh ini, batas hijau ditampilkan jika teks yang dimasukkan memiliki panjang 5 karakter atau lebih, seperti yang ditentukan oleh atribut pattern. Jika teks yang dimasukkan kurang dari 5 karakter, batas merah akan ditampilkan.

: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 adalah gaya yang diterapkan ketika elemen input numerik memiliki nilai dalam rentang yang ditentukan. Gaya :in-range diterapkan ketika kondisi yang ditentukan oleh atribut min dan max dalam HTML terpenuhi.

  • :out-of-range adalah gaya yang diterapkan ketika elemen input numerik memiliki nilai di luar rentang yang ditentukan. Gaya :out-of-range diterapkan ketika nilai melebihi rentang yang ditentukan oleh atribut min atau max.

  • Dalam contoh ini, ketika nilai dalam rentang yang ditentukan oleh atribut min="18" dan max="99" (18 hingga 99 termasuk) dimasukkan, sebuah garis tepi biru akan ditampilkan. Ketika nilai di luar rentang dimasukkan, sebuah garis tepi oranye akan ditampilkan.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() menerapkan gaya berdasarkan posisi elemen anak dalam induknya. Anda dapat menentukan angka atau ekspresi untuk n.
  • Dalam contoh ini, teks item daftar kedua menjadi biru.
Menerapkan pada Elemen Ganjil dan Genap 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Dengan menentukan even atau odd, Anda dapat menerapkan gaya ke elemen ganjil atau genap.
  • Dalam contoh ini, warna latar belakang yang berbeda diterapkan pada baris genap dan ganjil. Ini dapat digunakan untuk desain tabel bergaris, misalnya.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child menerapkan gaya ke elemen anak pertama dari induk.
  • Dalam contoh ini, teks pada elemen small pertama diberi gaya tebal dengan warna biru.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child menerapkan gaya ke elemen anak terakhir dari induk.
  • Dalam contoh ini, teks pada elemen small terakhir diberi gaya tebal dengan warna hijau.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • Pseudo-class :has() dalam CSS berfungsi sebagai selector parent. Dengan menggunakan pseudo-class ini, Anda dapat memilih elemen parent berdasarkan keberadaan elemen anak.
  • Dalam contoh ini, border diterapkan pada elemen p yang mengandung elemen span dengan kelas .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() menerapkan gaya ke elemen yang tidak memenuhi kondisi tertentu.
  • Dalam contoh ini, teks elemen q, kecuali elemen dengan class quote2, diberi gaya tebal dengan warna biru.

: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}
  • Pseudo-class :where() adalah selector CSS khusus yang menetapkan spesifisitas menjadi nol. Ini berguna ketika Anda ingin menangani beberapa selector secara kolektif dan menerapkan gaya tanpa memengaruhi spesifisitas elemen yang dipilih.
  • Pseudo-class :is() mengelompokkan beberapa selector dan memilih elemen yang memenuhi salah satu kondisi. Pseudo-class :is() sendiri memiliki spesifisitas yang sama dengan selector normal, tetapi gaya diterapkan berdasarkan spesifisitas tertinggi di antara selector internalnya.
  • Dalam contoh ini, :where() dan :is() digunakan untuk menerapkan gaya pada elemen <p> dan <span> di dalam class detail. Gaya text-decoration yang diatur oleh :where() digantikan oleh CSS berikutnya. Namun, gaya yang diatur oleh :is() memiliki spesifisitas lebih tinggi dan tidak digantikan oleh CSS berikutnya.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked menerapkan gaya saat kotak centang atau tombol radio dipilih.
  • Dalam contoh ini, border merah ditampilkan pada elemen input yang tercentang.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled menerapkan gaya ke elemen formulir yang dinonaktifkan.
  • Dalam contoh ini, latar belakang abu-abu dan kursor 'tidak diizinkan' diterapkan pada tombol yang dinonaktifkan.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited digunakan untuk menerapkan gaya pada tautan yang telah dikunjungi.
  • Dalam contoh ini, setelah mengklik dan mengunjungi sebuah tautan, warna teks elemen <a> berubah menjadi ungu.
Privasi dan Pembatasan Gaya

:visited memiliki beberapa batasan gaya untuk alasan perlindungan privasi. Ini mencegah situs eksternal menyimpulkan riwayat kunjungan pengguna. Properti yang dapat diubah dengan :visited terbatas pada yang berikut ini:.

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

Di sisi lain, properti selain ini (misalnya, display, visibility, position, dll.) tidak dapat diubah dengan :visited. Ini mencegah privasi pengguna bocor melalui riwayat kunjungan.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type memilih elemen pertama dari jenisnya (dengan nama tag yang sama) dalam elemen induknya.
  • Dalam contoh ini, teks pada elemen <var> pertama dan elemen <code> dalam kelas first-example diberi gaya dengan teks tebal berwarna biru.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type memilih elemen terakhir dari jenisnya dalam elemen induknya.
  • Dalam contoh ini, teks pada elemen <var> terakhir dan elemen <code> dalam kelas last-example diberi gaya dengan teks tebal berwarna hijau.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() menerapkan gaya pada kemunculan ke-n elemen dengan jenis yang sama.
  • Dalam contoh ini, teks pada elemen <var> kedua dan elemen <code> dalam kelas nth-example diberi gaya dengan teks tebal berwarna oranye.

Pseudo-elemen

Pseudo-elemen dalam CSS digunakan untuk menerapkan gaya pada bagian tertentu dari elemen yang dipilih. Berbeda dengan pseudo-kelas, pseudo-elemen fokus pada bagian tertentu dari suatu elemen, bukan keseluruhan elemen. Misalnya, mereka digunakan untuk menambahkan konten sebelum atau setelah elemen atau menerapkan gaya pada karakter atau baris tertentu.

Sintaks Dasar Pseudo-elemen

Pseudo-elemen biasanya ditulis dengan :: (dua titik) setelah selektor. Ini untuk membedakan mereka dari pseudo-kelas.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector adalah elemen target.
  • Bagian pseudo-element mewakili pseudo-elemen yang merujuk pada bagian atau aspek tertentu dari suatu elemen.
  • Anda dapat menentukan pseudo-elemen dengan menggunakan ::.

Pseudo-elemen yang Sering Digunakan

::before 

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

  • ::before menyisipkan konten virtual sebelum konten elemen dan menerapkan gaya pada bagian tersebut. Ini berguna untuk menyisipkan ikon atau label, misalnya.

  • Dalam contoh ini, teks "Catatan:" dimasukkan sebelum elemen <span> dengan kelas note. Konten yang ditentukan di sini tidak ada dalam HTML sebenarnya; konten tersebut ditambahkan secara virtual melalui CSS. Ini berarti Anda tidak dapat secara langsung memanipulasi konten yang ditambahkan melalui JavaScript, dll.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after menyisipkan konten virtual setelah konten elemen. Ini biasanya digunakan untuk menambahkan konten tambahan atau dekoratif setelah sebuah elemen.
  • Dalam contoh ini, ikon bintang emas ditambahkan setelah elemen <span> dengan kelas five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Pseudo-elemen ::placeholder digunakan untuk memberikan gaya pada teks placeholder di elemen formulir. Secara default, biasanya ditampilkan dengan teks abu-abu terang, tetapi dengan pseudo-elemen ::placeholder, Anda dapat mengubah gayanya agar sesuai dengan desain Anda.
  • Dalam contoh ini, warna teks placeholder untuk elemen input diatur menjadi biru transparan 70%, ukuran font 14px, dan diberi gaya miring.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter menerapkan gaya pada huruf pertama elemen tingkat blok. Ini digunakan untuk efek tipografis seperti yang terlihat di majalah atau surat kabar, di mana huruf pertama ditekankan. Perhatikan bahwa pseudo-elemen ini hanya efektif pada elemen tingkat blok dan tidak dapat diterapkan langsung pada elemen inline seperti <span>.
  • Dalam contoh ini, huruf pertama paragraf akan memiliki ukuran dua kali lipat, tebal, dan berwarna biru.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line menerapkan gaya pada baris pertama elemen blok. Ini terutama digunakan untuk paragraf teks, memungkinkan Anda menerapkan gaya berbeda pada baris pertama.
  • Dalam contoh ini, baris pertama paragraf akan diberi gaya tebal dan berwarna hijau.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection menerapkan gaya pada bagian teks yang dipilih (disoroti) oleh pengguna. Dengan ini, Anda dapat mengubah warna latar belakang dan warna teks ketika teks dipilih.
  • Dalam contoh ini, ketika teks pada elemen <span> dipilih, latar belakang menjadi kuning dan teks berubah menjadi hitam.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Karakter Khusus dan Fungsi dalam CSSAturan CSS `@`