Panduan Pseudo-Kelas CSS

Pseudo-kelas CSS

Pseudo-kelas digunakan untuk mendefinisikan keadaan khusus elemen.

Contoh, ini dapat digunakan untuk:

  • Atur gaya saat pengguna memegang tetikus di atas elemen.
  • Atur gaya untuk link yang telah diakses dan belum diakses.
  • Atur gaya saat elemen mendapatkan fokus.
  • Atur gaya untuk elemen formulir yang efektif/tidak efektif/wajib/dibutuhkan.

Tabel di bawah menunjukkan pseudo-kelas yang berbeda dalam CSS:

Pseudo-kelas Contoh Deskripsi contoh
:active a:active Pilih link yang aktif.
:any-link a:anylink Pilih semua elemen <a> atau <area> yang memiliki atribut href.
:auto-fill input:autofill Pilih semua elemen <input> yang diisi secara otomatis oleh peramban.
:checked option:checked Persetujuan semua elemen <input> atau <option> yang dipilih.
:default input:default Pilih elemen formulir baku dalam grup elemen yang relevan.
:defined :defined Pilih semua elemen yang telah ditentukan (standar atau elemen kustom).
:dir() :dir(rtl) Pilih elemen yang memiliki arah teks yang ditentukan.
:disabled option:disabled Pilih semua elemen yang diblokir, biasanya digunakan untuk elemen formulir.
:empty div:empty Pilih semua elemen yang tidak memiliki elemen anak (termasuk node teks).
:enabled input:enabled Pilih semua elemen yang diaktifkan, sering digunakan untuk elemen formulir.
:first @page :first Menunjukkan halaman pertama dokumen cetak (digunakan bersamaan dengan aturan @page).
:first-child p:first-child Pilih elemen yang adalah anak pertama di bawah parentnya (dalam sekumpulan bersaudara).
:first-of-type li:first-of-type Pilih elemen jenis khusus pertama di dalam sekumpulan bersaudara.
:focus select:focus Pilih elemen yang mendapat fokus, sering digunakan untuk elemen formulir.
:focus-visible button:focus-visible Pilih elemen yang mendapat fokus (hanya diterapkan gaya fokus saat diarahkan melalui papan tik daripada tetikus).
:focus-within form:focus-within Tandingkan elemen atau sebarang keturunan elemen yang mendapat fokus.
:fullscreen :fullscreen Pilih elemen yang berada dalam mode layar penuh.
:has() h2:has(+p) Pilih elemen <h2> yang berada setelah elemen <p> dan aplikasikan gaya ke <h2>.
:hover a:hover Pilih elemen yang berada di atas mouse.
:in-range input:in-range Pilih elemen <input> dengan nilai dalam rentang yang ditentukan.
:indeterminate input:indeterminate Pilih elemen formulir yang berada dalam keadaan tak tentu.
:invalid input:invalid Pilih elemen formulir yang tidak valid.
:is() :is(ul, ol) Pilih semua elemen <ul> dan <ol>.
:lang() p:lang(it) Pilih elemen <p> dengan atribut lang "it" (bahasa Itali).
:last-child li:last-child Pilih elemen <li> yang adalah anak terakhir di bawah parentnya.
:last-of-type p:last-of-type Pilih elemen <p> yang adalah elemen <p> terakhir di bawah parentnya.
:left @page :left Menunjukkan halaman kiri semua dokumen cetak (digunakan bersamaan dengan aturan @page).
:link a:link Pilih semua tautan yang belum diakses.
:modal :modal Pilih elemen yang berada dalam keadaan modal.
:not() :not(p) Pilih elemen yang bukan elemen <p>.
:nth-child() p:nth-child(2) Pilih elemen <p> yang adalah kedua anak elemen bawah parentnya.
:nth-last-child() p:nth-last-child(2) Pilih elemen <p> yang menjadi anak kedua terakhir dari родителя.
:nth-last-of-type() p:nth-last-of-type(2) Pilih elemen <p> yang menjadi elemen anak kedua terakhir dari родителя.
:nth-of-type() p:nth-of-type(2) Pilih elemen <p> yang menjadi elemen <p> kedua dari родителя.
:only-child p:only-child Pilih elemen <p> yang menjadi anak tunggal dari родителя.
:only-of-type p:only-of-type Pilih elemen <p> yang menjadi elemen <p> tunggal dari родителя.
:optional textarea:optional Pilih elemen <input>, <select> atau <textarea> yang tidak mempunyai properti required.
:out-of-range input:out-of-range Pilih elemen <input> yang nilai kurang dari yang ditentukan.
:placeholder-shown input:placeholder-shown Pilih elemen <input> atau <textarea> yang menampilkan teks placeholder saat ini.
:popover-open :popover-open Pilih elemen yang berada dalam keadaan menampilkan pop-up.
:read-only input:read-only Pilih elemen input yang mempunyai properti readonly.
:read-write input:read-write Pilih elemen input yang dapat diedit.
:required input:required Pilih elemen input yang mempunyai properti required.
:right @page :right Menunjukkan semua halaman kanan dokumen yang dicetak (dipakai bersamaan dengan aturan @page).
:root :root Pilih elemen root dokumen.
:scope :scope Pilih elemen yang digunakan sebagai titik referensi atau rentang penyesuaian pemilih.
:state() :state() Pilih elemen yang mempunyai status khusus yang ditentukan.
:target :target Pilih elemen target yang aktif.
:user-invalid :user-invalid Pilih elemen formulir yang mempunyai nilai yang salah (setelah pengguna berinteraksi dengannya).
:user-valid :user-valid Pilih elemen formulir yang mempunyai nilai yang sah (setelah pengguna berinteraksi dengannya).
:valid input:valid Pilih semua elemen input yang mempunyai nilai yang sah.
:visited a:visited Pilih semua pautan yang telah diakses.
:where() :where(ol, ul) Pilih semua elemen <ul> dan <ol>.