Panduan Referensi Pseudo-Kelas CSS

Pseudo-kelas CSS

Pseudo-kelas digunakan untuk mendefinisikan keadaan khusus elemen.

Contoh, ini dapat digunakan untuk:

  • Atur gaya saat pengguna membuang kursor di atas elemen.
  • Atur gaya untuk tautan 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 tautan yang aktif.
:any-link a:anylink Pilih semua elemen <a> atau <area> dengan atribut href.
:auto-fill input:autofill Pilih semua elemen <input> yang diisi otomatis oleh peramban.
:checked option:checked Tepatkan semua elemen <input> atau <option> yang terpilih.
:default input:default Pilih elemen formulir standar dalam set elemen yang relevan.
:defined :defined Pilih semua elemen yang telah ditentukan (standar atau elemen yang dibuat sendiri).
:dir() :dir(rtl) Pilih elemen yang memiliki arah teks yang ditentukan.
:disabled option:disabled Pilih semua elemen yang dinonaktifkan, sering digunakan untuk elemen formulir.
:empty div:empty Pilih semua elemen tanpa 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 yang akan dicetak (digunakan bersama dengan aturan @page).
:first-child p:first-child Pilih elemen yang adalah anak pertama dalam elemen induknya (dalam kelompok saudara).
:first-of-type li:first-of-type Pilih elemen jenis khusus pertama dalam kelompok saudara.
:focus select:focus Pilih elemen yang mendapatkan fokus, sering digunakan untuk elemen formulir.
:focus-visible button:focus-visible Pilih elemen yang mendapatkan fokus (hanya diterapkan gaya fokus saat diutamakan melalui keyboard bukan mouse).
:focus-within form:focus-within Persetujuan elemen atau sebarang keturunan elemen yang mendapatkan fokus.
:fullscreen :fullscreen Pilih elemen yang saat ini berada dalam mode layar penuh.
:has() h2:has(+p) Pilih elemen <h2> yang berada sebelah belakang elemen <p> dan aplikasikan gaya ke <h2>.
:hover a:hover Pilih elemen yang dihiasi 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 dalam elemen induknya.
:last-of-type p:last-of-type Pilih elemen <p> yang adalah elemen <p> terakhir dalam elemen induknya.
:left @page :left Menunjukkan semua halaman kiri dokumen yang akan dicetak (digunakan bersama 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 induknya.
:nth-last-child() p:nth-last-child(2) Pilih elemen <p> yang adalah anak kedua terakhir dari parentnya.
:nth-last-of-type() p:nth-last-of-type(2) Pilih elemen <p> yang adalah elemen <p> kedua terakhir dari parentnya.
:nth-of-type() p:nth-of-type(2) Pilih elemen <p> yang adalah elemen <p> kedua dari parentnya.
:only-child p:only-child Pilih elemen <p> yang adalah anak tunggal yang unik dari parentnya.
:only-of-type p:only-of-type Pilih elemen <p> yang adalah elemen <p> tunggal yang unik dari parentnya.
:optional textarea:optional Pilih elemen <input>, <select> atau <textarea> yang tidak memiliki atribut required.
:out-of-range input:out-of-range Pilih elemen <input> yang nilai nya melebihi rentang yang ditentukan.
:placeholder-shown input:placeholder-shown Pilih elemen <input> atau <textarea> yang saat ini menampilkan teks placeholder.
:popover-open :popover-open Pilih elemen yang berada dalam keadaan menampilkan pop-up.
:read-only input:read-only Pilih elemen input yang memiliki atribut readonly.
:read-write input:read-write Pilih elemen input yang dapat diedit.
:required input:required Pilih elemen input yang memiliki atribut required.
:right @page :right Menunjukkan semua halaman kanan dokumen yang dicetak (digunakan bersamaan dengan aturan @page).
:root :root Pilih elemen akar dokumen.
:scope :scope Pilih elemen yang digunakan sebagai titik referensi atau rentang pemilihan penyesuai.
:state() :state() Pilih elemen yang memiliki status khusus yang ditentukan.
:target :target Pilih elemen target yang aktif saat ini.
:user-invalid :user-invalid Pilih elemen formulir yang memiliki nilai yang tidak berlaku (setelah pengguna berinteraksi dengannya).
:user-valid :user-valid Pilih elemen formulir yang memiliki nilai yang berlaku (setelah pengguna berinteraksi dengannya).
:valid input:valid Pilih semua elemen input yang memiliki nilai yang berlaku.
:visited a:visited Pilih semua tautan yang telah diakses.
:where() :where(ol, ul) Pilih semua elemen <ul> dan <ol>.