Articles
Pengenalan kepada CSS
Kelas Pseudo dan Elemen Pseudo CSS

Kelas Pseudo dan Elemen Pseudo CSS

Artikel ini menerangkan tentang pseudo-class dan pseudo-elemen dalam CSS.

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

YouTube Video

HTML untuk Pratonton

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>

Kelas Pseudo

Pseudo-class CSS adalah fungsi yang menerapkan gaya kepada elemen berdasarkan keadaan tertentu seperti keadaan elemen atau hierarki. Ia membolehkan anda menambah gaya istimewa berdasarkan keadaan atau kedudukan elemen, berguna untuk mewakili situasi dinamik yang tidak boleh ditentukan oleh kelas atau ID biasa. Pseudo-class memudahkan pelaksanaan antara muka pengguna dinamik dan gaya berdasarkan keadaan tertentu, membolehkan reka bentuk yang bertindak balas kepada interaksi pengguna atau struktur kandungan.

Sintaks Asas Kelas Pseudo

Sintaks asas pseudo-class adalah seperti berikut.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector adalah elemen sasaran.
  • Bahagian pseudo-class mewakili pseudo-class yang menunjukkan keadaan atau syarat tertentu.
  • : digunakan untuk memilih pseudo-class.

Kelas Pseudo yang Lazim Digunakan

:hover 

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

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus menerapkan gaya apabila elemen menerima fokus. Ia terutamanya digunakan untuk elemen borang dan pautan.
  • Dalam contoh ini, garisan biru muncul apabila elemen input difokuskan.

:active 

1button:active {
2    background-color: green;
3}
  • :active menerapkan gaya kepada elemen apabila ia aktif (sewaktu ia diklik).
  • Dalam contoh ini, sewaktu butang 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 kepada elemen yang tidak mempunyai sebarang anak elemen. Elemen sasaran tidak boleh mengandungi node teks, ruang kosong, atau komen.
  • Dalam contoh ini, jika elemen dengan kelas box tidak mengandungi apa-apa, latar belakang kelabu dan sempadan berjalur hitam akan diterapkan pada elemen tersebut. Jika terdapat ruang kosong, 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 ialah gaya yang diterapkan pada elemen borang dengan nilai input yang sah. Gaya :valid diterapkan apabila syarat yang dinyatakan oleh atribut HTML seperti pattern atau type (contohnya, email) dipenuhi.

  • :invalid ialah gaya yang diterapkan pada elemen borang dengan nilai input yang tidak sah. Gaya :invalid diterapkan apabila elemen borang tidak memenuhi peraturan pengesahan HTML (contohnya, type="email").

  • Dalam contoh ini, sempadan hijau ditunjukkan jika teks yang dimasukkan mempunyai 5 aksara atau lebih, seperti yang dinyatakan oleh atribut pattern. Jika teks yang dimasukkan kurang daripada 5 aksara, sempadan merah akan ditunjukkan.

: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 ialah gaya yang digunakan apabila elemen input numerik memegang nilai dalam julat yang ditentukan. Gaya :in-range digunakan apabila syarat-syarat yang ditentukan oleh atribut min dan max dalam HTML dipenuhi.

  • :out-of-range ialah gaya yang digunakan apabila elemen input numerik memegang nilai di luar julat yang ditentukan. Gaya :out-of-range digunakan apabila nilai melebihi julat yang ditentukan oleh atribut min atau max.

  • Dalam contoh ini, apabila nilai dalam julat yang ditentukan oleh atribut min="18" dan max="99" (18 hingga 99 termasuk) dimasukkan, sempadan biru dipaparkan. Apabila nilai di luar julat dimasukkan, sempadan jingga dipaparkan.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() menerapkan gaya berdasarkan kedudukan elemen anak dalam induknya. Anda boleh menentukan nombor atau ungkapan untuk n.
  • Dalam contoh ini, teks item senarai kedua menjadi biru.
Menerapkan kepada 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 boleh menerapkan gaya kepada elemen ganjil atau genap.
  • Dalam contoh ini, warna latar belakang yang berbeza diaplikasikan pada baris genap dan ganjil. Ini boleh digunakan untuk reka bentuk jadual berjalur, contohnya.

:first-child 

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

:last-child 

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

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • Pseudo-class :has() dalam CSS berfungsi sebagai pemilih elemen ibu bapa. Dengan menggunakan pseudo-class ini, anda boleh memilih elemen ibu bapa berdasarkan kehadiran elemen anak.
  • Dalam contoh ini, sempadan digunakan pada elemen p yang mengandungi elemen span dengan kelas .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() menerapkan gaya kepada elemen yang tidak memenuhi syarat tertentu.
  • Dalam contoh ini, teks elemen q, kecuali yang mempunyai kelas quote2, akan bergaya 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() ialah pemilih CSS khas yang menetapkan keutamaan kepada sifar. Ini berguna apabila anda ingin menguruskan pelbagai pemilih secara kolektif dan menerapkan gaya tanpa mempengaruhi keutamaan elemen yang dipilih.
  • Pseudo-class :is() menggabungkan pelbagai pemilih dan memilih elemen yang sesuai dengan mana-mana syarat. Pseudo-class :is() sendiri mempunyai keutamaan yang sama seperti pemilih biasa, tetapi ia menerapkan gaya berdasarkan keutamaan tertinggi dalam pemilih dalaman.
  • Dalam contoh ini, :where() dan :is() digunakan untuk menerapkan gaya kepada elemen <p> dan <span> dalam kelas detail. Gaya text-decoration yang ditetapkan oleh :where() diubah oleh CSS berikutnya. Walau bagaimanapun, gaya yang ditetapkan oleh :is() mempunyai keutamaan yang lebih tinggi dan tidak diubah oleh CSS berikutnya.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked menerapkan gaya apabila kotak semak atau butang radio dipilih.
  • Dalam contoh ini, sempadan merah ditunjukkan pada elemen input yang telah dipilih.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled menerapkan gaya kepada elemen borang yang dinyahdayakan.
  • Dalam contoh ini, latar belakang kelabu dan kursor 'tidak dibenarkan' diaplikasikan pada butang yang dinyahdayakan.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited digunakan untuk menerapkan gaya kepada pautan yang telah dilawati.
  • Dalam contoh ini, selepas mengklik dan melawat pautan, warna teks elemen <a> akan berubah menjadi ungu.
Privasi dan Pembatasan Gaya

:visited mempunyai beberapa sekatan gaya atas sebab perlindungan privasi. Ini menghalang laman luar daripada membuat kesimpulan tentang sejarah lawatan pengguna. Harta yang boleh diubah dengan :visited dihadkan kepada yang berikut:.

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

Sebaliknya, sifat selain ini (contohnya, display, visibility, position, dsb.) tidak boleh diubah dengan :visited. Ini menghalang privasi pengguna daripada dibocorkan melalui sejarah lawatan.

:first-of-type 

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

:last-of-type 

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

:nth-of-type() 

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

Pseudo-elemen

Pseudo-elemen dalam CSS digunakan untuk menerapkan gaya pada bahagian spesifik elemen yang dipilih. Tidak seperti pseudo-kelas, pseudo-elemen memberi tumpuan kepada bahagian spesifik elemen daripada seluruh elemen. Sebagai contoh, ia digunakan untuk menambah kandungan sebelum atau selepas elemen atau menerapkan gaya pada watak atau baris tertentu.

Sintaks Asas Pseudo-elemen

Pseudo-elemen biasanya ditulis dengan :: (dua titik bertindih) selepas pemilih. Ini adalah untuk membezakannya daripada pseudo-kelas.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector adalah elemen sasaran.
  • Bahagian pseudo-element mewakili pseudo-elemen yang merujuk kepada bahagian atau aspek tertentu sesuatu elemen.
  • Anda boleh menentukan pseudo-elemen dengan menggunakan ::.

Pseudo-elemen yang Sering Digunakan

::before 

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

  • ::before menyisipkan kandungan maya sebelum kandungan elemen dan menerapkan gaya pada bahagian itu. Ia berguna untuk menyisipkan ikon atau label, sebagai contoh.

  • Dalam contoh ini, teks "Nota:" dimasukkan sebelum elemen <span> dengan kelas note. Kandungan yang dinyatakan di sini tidak wujud dalam HTML sebenar; ia ditambah secara maya melalui CSS. Ini bermakna anda tidak boleh memanipulasi kandungan yang ditambah melalui JavaScript, dsb secara langsung.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after menyisipkan kandungan maya selepas kandungan elemen. Ia biasanya digunakan untuk menambah kandungan tambahan atau hiasan selepas satu elemen.
  • Dalam contoh ini, ikon bintang emas ditambahkan selepas 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}
  • Elemen pseudo ::placeholder digunakan untuk memberi gaya kepada teks petunjuk dalam elemen borang. Secara lalai, ia biasanya dipaparkan dalam teks kelabu terang, tetapi dengan elemen pseudo ::placeholder, anda boleh mengubah gaya agar sesuai dengan reka bentuk anda.
  • Dalam contoh ini, warna teks petunjuk untuk elemen input ditetapkan kepada biru lutsinar 70%, saiz fon kepada 14px, dan dicondongkan.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter digunakan untuk gaya pada huruf pertama elemen peringkat blok. Ia digunakan untuk kesan tipografi seperti yang dilihat dalam majalah atau surat khabar, di mana huruf pertama ditekankan. Perhatikan bahawa elemen pseudo ini hanya berkesan pada elemen peringkat blok dan tidak boleh digunakan terus pada elemen sebaris seperti <span>.
  • Dalam contoh ini, huruf pertama perenggan akan menjadi dua kali ganda saiznya, tebal, dan berwarna biru.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line digunakan untuk gaya pada baris pertama elemen blok. Ia khususnya digunakan untuk perenggan teks, membolehkan anda menggunakan gaya berbeza pada baris pertama.
  • Dalam contoh ini, baris pertama perenggan akan tebal dan berwarna hijau.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection digunakan untuk memberi gaya pada bahagian teks yang dipilih (diserlahkan) oleh pengguna. Dengan ini, anda boleh mengubah warna latar belakang dan warna teks apabila teks dipilih.
  • Dalam contoh ini, apabila teks elemen <span> dipilih, latar belakang menjadi kuning dan teks bertukar hitam.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Karakters Khas dan Fungsi dalam CSSPeraturan CSS `@`