Pseudo-class adalah kata kunci khusus yang ditambahkan ke selector CSS untuk memilih elemen berdasarkan state (keadaan) atau posisinya, bukan berdasarkan nama tag atau class biasa. Ditulis dengan tanda titik dua tunggal, misalnya a:hover (link saat disentuh kursor) atau li:first-child (item pertama dalam daftar). Berkat pseudo-class, kamu bisa memberi gaya berbeda pada satu elemen tergantung apakah sedang di-hover, difokus, ditekan, atau ada di posisi tertentu, tanpa satu baris JavaScript pun.

Konsep ini sering bikin pemula bingung: apa bedanya :hover dengan class .hover biasa? Kenapa titik duanya cuma satu (bukan dua seperti ::before)? Kenapa :nth-child(even) bisa bikin baris tabel selang-seling otomatis? Panduan ini membahas semuanya secara berurutan, dari definisi, pseudo-class state yang paling sering dipakai (:hover, :focus, :active), pseudo-class struktural (:first-child, :nth-child, :last-child), perbedaannya dengan pseudo-element, sampai kesalahan umum. Semua bisa langsung kamu coba.

Pseudo-class Adalah… (Definisi dan Cara Menulisnya)

Pseudo-class adalah penanda pada selector yang berkata “pilih elemen ini, tapi hanya ketika kondisi tertentu terpenuhi”. Kata “pseudo” berarti “seolah-olah”, seolah-olah ada class tambahan yang menempel dan lepas sendiri mengikuti keadaan elemen, padahal kamu tidak menulis class apa pun di HTML.

Bentuk penulisannya: selector:nama-pseudo-class, dengan satu tanda titik dua:

a:hover      { color: orange; }   /* link saat kursor di atasnya */
input:focus  { border-color: blue; } /* input saat sedang diklik/aktif */
li:first-child { font-weight: bold; } /* item pertama dalam list */

Perhatikan: tidak ada spasi sebelum titik dua. a:hover (menempel) berbeda arti dari a :hover (dengan spasi, itu jadi selector keturunan). Detail kecil ini sering jadi sumber bug.

Pseudo-class dibagi menjadi dua kelompok besar yang akan kita bahas satu per satu:

Pseudo-class state (dinamis), merespons interaksi pengguna: :hover, :focus, :active, :visited, :checked, :disabled.
Pseudo-class struktural (posisi), memilih berdasarkan letak elemen di dalam induknya: :first-child, :last-child, :nth-child(), :only-child.

Kalau kamu ingin latihan terstruktur dengan editor langsung di browser, lesson pseudo-classes di Hyper Sheets membahas semuanya lesson per lesson.

:hover, :focus, dan :active, Pseudo-class State

Tiga pseudo-class state yang paling sering dipakai adalah :hover (kursor di atas elemen), :focus (elemen sedang aktif/dipilih), dan :active (elemen sedang ditekan). Ketiganya adalah tulang punggung feedback interaktif di web, merekalah yang membuat tombol terasa “hidup” saat disentuh.

.tombol            { background: #f97316; }
.tombol:hover      { background: #fb923c; }  /* lebih terang saat disentuh */
.tombol:focus-visible { outline: 3px solid #fdba74; } /* ring fokus keyboard */
.tombol:active     { transform: scale(0.95); } /* mengecil saat ditekan */

Mari kenali karakter masing-masing:

:hover aktif selama kursor mouse berada di atas elemen. Ini yang paling terkenal, dipakai untuk tombol, link, kartu, dan hampir semua elemen yang bisa diklik. Catatan penting: di perangkat sentuh (HP) :hover tidak selalu berperilaku sama, jadi jangan sembunyikan informasi penting di balik hover saja.
:focus aktif saat elemen “dipilih”, input yang diklik, atau tombol/link yang dijangkau lewat tombol Tab keyboard. Ini krusial untuk aksesibilitas: pengguna keyboard butuh tahu elemen mana yang sedang aktif. Versi modernnya, :focus-visible, hanya menampilkan ring fokus saat navigasi keyboard (bukan saat klik mouse), lebih rapi.
:active aktif pada momen singkat saat elemen sedang ditekan, antara mouse ditekan dan dilepas. Efeknya biasa dibuat halus, seperti tombol yang sedikit mengecil supaya terasa “tertekan”.

Paling enak dicoba langsung. Ganti tab untuk melihat tiap pseudo-class, lalu arahkan mouse, klik-tahan, atau tekan Tab ke tombolnya, badge di bawah akan menyala sesuai state yang sedang aktif:

Coba Sendiri

Pseudo-class state

Gaya berlaku saat kursor mouse berada di atas elemen. Umum untuk memberi feedback pada tombol & link.

○ :hover○ :focus○ :active

Gerakkan mouse ke tombol, tahan klik, atau tekan Tab dari keyboard, badge di atas menyala sesuai state aktif.

.tombol:hover {
  background: #fb923c;
  transform: translateY(-2px);
}

Salah satu alasan :hover terasa mulus di web modern adalah karena hampir selalu dipasangkan dengan transition, sehingga perubahan gaya tidak “meloncat” tapi menyapu halus. Kalau penasaran cara kerja animasi antar-state ini, pelajari lebih lanjut di panduan CSS transform untuk efek gerak dan skala.

:nth-child, :first-child, dan :last-child, Pseudo-class Struktural

Pseudo-class struktural memilih elemen berdasarkan posisinya di dalam elemen induk: :first-child (anak pertama), :last-child (anak terakhir), dan :nth-child(n) (anak ke-n dengan pola). Kekuatannya: kamu bisa menata “item ke sekian” tanpa memberi class satu per satu di HTML.

Contoh paling ikonik, baris tabel selang-seling (zebra stripes):

/* Baris genap diberi latar abu, ganjil dibiarkan putih */
tr:nth-child(even) { background: #f1f5f9; }

:nth-child() menerima beberapa bentuk argumen:

li:nth-child(1)    { color: red; }    /* item ke-1 (sama seperti :first-child) */
li:nth-child(even) { color: blue; }   /* item ke-2, 4, 6, ... (genap) */
li:nth-child(odd)  { color: green; }  /* item ke-1, 3, 5, ... (ganjil) */
li:nth-child(3n)   { color: purple; } /* setiap kelipatan 3: item 3, 6, 9, ... */

Rumus an + b (seperti 3n atau 2n+1) memungkinkan pola berulang apa pun. Untuk kebutuhan sehari-hari, even, odd, dan angka tunggal sudah menutup sebagian besar kasus.

Ganti ke tab struktural pada playground di atas untuk melihat item mana yang cocok dengan :first-child, :nth-child(even), dan :last-child, item yang cocok akan menyala oranye.

Pseudo-class vs Pseudo-element: Apa Bedanya?

Perbedaan utama: pseudo-class (satu titik dua, :hover) memilih elemen yang sudah ada berdasarkan state/posisinya, sedangkan pseudo-element (dua titik dua, ::before) membuat dan menata bagian baru dari sebuah elemen yang tidak ada di HTML. Keduanya sering tertukar karena sama-sama pakai titik dua, tapi perannya berbeda.

Aspek	Pseudo-class	Pseudo-element
Penulisan	Satu titik dua: `:hover`	Dua titik dua: `::before`
Fungsi	Memilih elemen berdasarkan state/posisi	Membuat/menata bagian semu dari elemen
Contoh	`:hover`, `:focus`, `:nth-child()`, `:checked`	`::before`, `::after`, `::first-line`, `::placeholder`
Menambah konten?	Tidak, hanya menata yang sudah ada	Bisa (`content: "..."` pada `::before`/`::after`)

Ringkasnya: kalau kamu ingin bereaksi terhadap keadaan elemen (disentuh, difokus, dicentang, posisi ke-3), itu pseudo-class. Kalau kamu ingin menata sepotong elemen atau menyisipkan dekorasi (ikon sebelum teks, baris pertama, teks placeholder), itu pseudo-element.

Pseudo-class Berguna Lainnya

Selain state dan struktural yang sudah dibahas, ada beberapa pseudo-class yang sangat sering muncul di form dan komponen interaktif:

:checked, cocok saat checkbox atau radio button dalam keadaan tercentang. Kunci untuk membuat toggle switch murni CSS.
:disabled dan :enabled, untuk menata input/tombol yang dinonaktifkan (biasanya diberi warna pudar dan kursor not-allowed).
:required dan :valid/:invalid, memberi feedback pada form berdasarkan validasi (misalnya border merah saat isian tidak valid).
:not(selector), kebalikannya: memilih semua elemen yang TIDAK cocok. Contoh: li:not(:last-child) untuk memberi garis pemisah pada semua item kecuali yang terakhir.

/* Toggle switch tanpa JavaScript */
input:checked + .slider { background: #22c55e; }

/* Tombol nonaktif tampak pudar */
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Semua item kecuali terakhir dapat garis bawah */
.menu li:not(:last-child) { border-bottom: 1px solid #e2e8f0; }

:not() sangat sering dipakai bareng struktural, pola :not(:last-child) di atas jauh lebih rapi daripada memberi class khusus ke item terakhir. Untuk memahami bagaimana selector-selector ini saling mengalahkan saat aturannya bentrok, lihat perbedaan id dan class di CSS yang membahas specificity dengan angka konkret.

Kesalahan Umum Saat Menggunakan Pseudo-class

Kesalahan pseudo-class paling umum: menulis spasi sebelum titik dua, salah paham cara :nth-child menghitung, menghapus :focus tanpa pengganti, dan mengandalkan :hover di perangkat sentuh. Berikut daftarnya beserta solusinya.

1. Ada Spasi Sebelum Titik Dua

a :hover (dengan spasi) bukan “link saat di-hover”, melainkan “elemen di dalam <a> yang sedang di-hover”. Pseudo-class harus menempel ke selector-nya: tulis a:hover, tanpa spasi.

2. Menghapus Outline :focus Tanpa Pengganti

Menulis :focus { outline: none; } untuk “membersihkan” garis biru bawaan browser membuat pengguna keyboard buta arah. Kalau gaya default tidak cocok, ganti dengan focus style-mu sendiri (:focus-visible + outline custom), jangan sekadar dihapus.

3. Mengira :nth-child Menghitung per Tipe

Seperti dibahas di atas, p:nth-child(2) menghitung semua saudara, bukan hanya <p>. Kalau kamu butuh “elemen setipe ke-n”, gunakan :nth-of-type().

4. Bergantung Penuh pada :hover

Di HP dan tablet tidak ada kursor, jadi :hover bisa tidak terpicu atau “nyangkut”. Jangan pernah menyembunyikan tombol atau informasi penting yang hanya muncul saat hover, sediakan juga cara mengaksesnya lewat tap/klik langsung.

Cek Pemahaman

Apa yang dipilih oleh selector `li:nth-child(even)`?

FAQ Seputar Pseudo-class CSS

Pseudo-class adalah apa?

Pseudo-class adalah kata kunci yang ditambahkan ke selector CSS (dengan satu tanda titik dua) untuk memilih elemen berdasarkan state atau posisinya, bukan berdasarkan class yang kamu tulis di HTML. Contohnya :hover (saat disentuh kursor), :focus (saat aktif/dipilih), dan :first-child (anak pertama induknya).

Apa perbedaan pseudo-class dan pseudo-element?

Pseudo-class memakai satu titik dua (:hover) dan memilih elemen yang sudah ada berdasarkan keadaannya. Pseudo-element memakai dua titik dua (::before) dan membuat atau menata bagian baru dari sebuah elemen, bahkan bisa menyisipkan konten lewat properti content.

Apa fungsi :hover?

:hover menerapkan gaya saat kursor mouse berada di atas elemen. Fungsinya memberi feedback visual, misalnya tombol yang berubah warna atau link yang bergaris bawah saat disentuh, sehingga pengguna tahu elemen itu bisa diinteraksi.

Bagaimana cara membuat baris tabel selang-seling?

Gunakan tr:nth-child(even) (atau odd) untuk memberi latar berbeda pada baris genap. Contoh: tr:nth-child(even) { background: #f1f5f9; } membuat baris ke-2, 4, 6, dan seterusnya berlatar abu-abu, pola zebra stripes yang membuat tabel lebih mudah dibaca.

Kenapa :hover tidak bekerja di HP?

Perangkat sentuh tidak punya kursor mouse, jadi tidak ada konsep “mengarahkan tanpa mengklik”. Sebagian browser mobile memicu :hover pada tap pertama, tapi perilakunya tidak konsisten. Karena itu, jangan pernah menaruh informasi penting hanya di balik :hover, selalu sediakan akses lewat tap langsung.

Langkah Selanjutnya

Sekarang kamu sudah pegang gambaran utuhnya: pseudo-class adalah penanda satu titik dua yang memilih elemen berdasarkan state (:hover, :focus, :active) atau posisi (:first-child, :nth-child, :last-child), berbeda dari pseudo-element yang memakai dua titik dua untuk membuat bagian semu.

Seperti biasa, konsep baru melekat lewat praktik, coba buat satu tombol dengan tiga state (:hover, :focus-visible, :active) sekaligus, lalu bikin daftar dengan zebra stripes memakai :nth-child(even). Kalau mau latihan terstruktur dengan feedback langsung, lesson pseudo-classes di Hyper Sheets menyediakan editor interaktif yang mengecek jawabanmu lesson per lesson. Selamat ngoding!