CSS memiliki banyak pseudo-class yang memungkinkan kita menarget elemen berdasarkan status, struktur, dan interaksi. Berikut ini adalah ringkasan beberapa pseudo-class yang dikelompokkan berdasarkan kategori, lengkap dengan deskripsi singkat dan tingkat prioritas mempelajarinya.
👁️ Element display state pseudo-classes
Pseudo-class berikut digunakan untuk menarget elemen berdasarkan status tampilannya.
| Pseudo-class | Keterangan | Prioritas |
|---|---|---|
| :fullscreen | Menargetkan elemen saat berada dalam mode fullscreen | ⭐⭐ |
| :modal | Menargetkan elemen yang sedang terbuka sebagai modal | ⭐⭐⭐⭐ |
| :picture-in-picture | Menargetkan elemen | ⭐ |
| :open | Menargetkan elemen seperti yang sedang terbuka | ⭐⭐⭐ |
| :popover-open | Menargetkan elemen yang sedang terbuka sebagai popover | ⭐⭐⭐⭐ |
⌨️ Input pseudo-classes
Digunakan untuk menarget elemen input berdasarkan status, validasi, dan interaksi pengguna.
| Pseudo-class | Keterangan | Prioritas |
|---|---|---|
| :autofill | Menargetkan field form yang diisi otomatis oleh browser | ⭐ |
| :enabled | Menargetkan elemen input yang tidak dinonaktifkan | ⭐⭐ |
| :disabled | Menargetkan elemen input yang dinonaktifkan | ⭐⭐⭐ |
| :read-only | Menargetkan elemen input yang bersifat hanya-baca | ⭐⭐ |
| :placeholder-shown | Menargetkan input yang sedang menampilkan placeholder | ⭐⭐⭐ |
| :default | Menargetkan elemen input yang menjadi pilihan default | ⭐ |
| :checked | Menargetkan input seperti checkbox/radio yang tercentang | ⭐⭐⭐⭐⭐ |
| :blank | Menargetkan input kosong (belum diisi sama sekali) | ⭐ |
| :valid | Menargetkan input yang lolos validasi HTML5 | ⭐⭐ |
| :user-valid | Menargetkan input valid setelah ada interaksi user | ⭐⭐⭐ |
| :invalid | Menargetkan input yang gagal validasi HTML5 | ⭐⭐ |
| :user-invalid | Menargetkan input tidak valid setelah ada interaksi user | ⭐⭐⭐ |
| :in-range | Menargetkan input dengan nilai di dalam rentang yang valid | ⭐ |
| :out-of-range | Menargetkan input dengan nilai di luar rentang yang valid | ⭐ |
| :required | Menargetkan input yang wajib diisi | ⭐⭐⭐ |
| :optional | Menargetkan input yang tidak wajib diisi | ⭐ |
🌍 Location Pseudo-classes
Digunakan untuk menarget link atau elemen berdasarkan URL dan fragment.
| Pseudo-class | Keterangan | Prioritas |
|---|---|---|
| :any-link | Menargetkan semua elemen dengan atribut href, baik yang dikunjungi maupun belum | ⭐⭐⭐ |
| :link | Menargetkan link yang belum dikunjungi | ⭐⭐⭐⭐⭐ |
| :visited | Menargetkan link yang sudah dikunjungi | ⭐⭐⭐⭐⭐ |
| :local-link | Menargetkan link yang mengarah ke halaman yang sama (internal link) | ⭐ |
| :target | Menargetkan elemen yang sesuai dengan fragment identifier di URL (misalnya #section) | ⭐⭐⭐ |
| :target-within | Menargetkan elemen yang mengandung target | ⭐⭐⭐ |
🌳 Tree-structural Pseudo-classes
Digunakan untuk menarget elemen berdasarkan struktur DOM-nya.
| Pseudo-class | Keterangan | Prioritas |
|---|---|---|
| :root | Menargetkan elemen root dari dokumen (biasanya )—berguna untuk deklarasi CSS global seperti variabel | ⭐⭐⭐⭐⭐ |
| :empty | Menargetkan elemen yang tidak memiliki anak (termasuk teks, komentar, dan elemen) | ⭐⭐⭐ |
| :first-child | Menargetkan elemen yang merupakan anak pertama dari parent-nya | ⭐⭐⭐⭐ |
| :first-of-type | Menargetkan elemen pertama dari jenisnya di antara sibling-nya | ⭐⭐⭐ |
| :last-child | Menargetkan elemen terakhir dari parent-nya | ⭐⭐⭐⭐ |
| :last-of-type | Menargetkan elemen terakhir dari jenisnya di antara sibling-nya | ⭐⭐⭐ |
| :nth-child() | Menargetkan elemen berdasarkan urutan posisinya dalam parent | ⭐⭐⭐⭐⭐ |
| :nth-last-child() | Menargetkan elemen dari belakang berdasarkan urutan dalam parent | ⭐⭐⭐⭐ |
| :nth-of-type() | Menargetkan elemen berdasarkan urutan dari jenisnya di antara sibling-nya | ⭐⭐⭐⭐ |
| :nth-last-of-type() | Menargetkan elemen terakhir dari jenisnya di antara sibling-nya dari belakang | ⭐⭐⭐ |
| :only-child | Menargetkan elemen yang merupakan satu-satunya anak dari parent-nya | ⭐⭐⭐⭐⭐ |
| :only-of-type | Menargetkan elemen yang merupakan satu-satunya dari jenisnya di antara sibling-nya | ⭐⭐ |
🖱️ User Action Pseudo-classes
Menargetkan elemen berdasarkan interaksi pengguna seperti hover, klik, atau fokus.
| Pseudo-class | Keterangan | Prioritas |
|---|---|---|
| :hover | Menargetkan elemen saat pointer berada di atasnya | ⭐⭐⭐⭐⭐ |
| :active | Menargetkan elemen saat sedang di-klik atau di-tap | ⭐⭐⭐⭐⭐ |
| :focus | Menargetkan elemen saat mendapatkan fokus input (keyboard, mouse, dll) | ⭐⭐⭐⭐⭐ |
| :focus-visible | Fokus hanya terlihat ketika pengguna menavigasi dengan keyboard/tab (bukan mouse) | ⭐⭐⭐⭐ |
| :focus-within | Menargetkan elemen yang memiliki anak yang sedang fokus | ⭐⭐⭐ |
🧩 Functional Pseudo-classes
Ini adalah pseudo-class dengan tanda kurung () dan biasanya digunakan untuk membuat selector lebih dinamis dan fleksibel.
| Pseudo-class | Keterangan | Prioritas |
|---|---|---|
| :is() | Menyederhanakan penulisan selector kompleks. Cocok untuk menarget banyak elemen sekaligus. | ⭐⭐⭐⭐⭐ |
| :where() | Mirip seperti :is(), tapi tidak berkontribusi pada specificity (sangat berguna untuk reset atau default styling) | ⭐⭐⭐⭐ |
| :has() | Selector powerful yang bisa memilih elemen berdasarkan anak/cucu atau kontennya (parent selector!) | ⭐⭐⭐⭐⭐ |
| :not() | Menargetkan elemen kecuali yang memenuhi selector tertentu | ⭐⭐⭐⭐⭐ |
Keempat pseudo-class ini sangat powerful dan wajib dikuasai karena membuat kita bisa menulis selector yang lebih ekspresif dan maintainable.
Disclaimer: Penilaian kolom prioritas datangnya murni dari opini saya sendiri. Jadi jika kamu tidak setuju, silakan sesuaikan.
Kalau kamu suka cheat sheet ini, jangan lupa 💖 save, 🗨️ comment, atau 🔁 share ke sesama web developer lainnya!
Sampai jumpa di tulisan selanjutnya 👋