Pseudo-class & Pseudo-element: Sihir Tersembunyi CSS
Sejauh ini kita menargetkan elemen HTML berdasarkan Tag, Class, dan ID yang terlihat jelas di kode HTML.
Tapi, bagaimana jika kita ingin menargetkan "Kondisi" dari sebuah elemen? (Misal: Hanya ubah warnanya
saat mouse hovering/diarahkan ke atasnya).
Atau bagaimana jika kita ingin menargetkan bagian khusus dari sebuah elemen yang tidak ada kotak
HTML-nya secara spesifik? (Misal: Huruf pertama saja dari sebuah paragraf). Di situlah
Pseudo-class (Titik dua tunggal :) dan
Pseudo-element (Titik dua ganda ::) beraksi!
🎭 Pseudo-class (Kondisi / State)
Kata "Pseudo" berarti "Semu" atau "Palsu". Pseudo-class digunakan untuk memberikan
style khusus pada sebuah elemen hanya jika ia berada dalam keadaan (state) tertentu. Ditandai
dengan 1 tanda titik dua ( : ).
:hover
Saat panah mouse berada (melayang) persis di atas elemen tersebut.
button:hover { background: blue; }
:active
Saat elemen sedang di-klik/ditekan (Mouse ditekan tahan).
button:active { transform: scale(0.9); }
:focus
Saat elemen (biasanya input teks) sedang aktif diketik / di-klik.
input:focus { border-color: green; }
🔢 Pseudo-class Urutan (nth-child)
Sangat berguna untuk menamai list tanpa harus menambahkan ratusan class HTML satu per satu.
/* Anak Genap (2, 4, 6) */ li:nth-child(even) { background: abu-abu; } /* Anak Ganjil (1, 3, 5) */ li:nth-child(odd) { background: putih; } /* Anak Spesifik ke-1 & Terakhir */ li:first-child { color: green; } li:last-child { color: red; }
- 1 Budi (first-child)
- 2 Andi (even)
- 3 Siti (odd)
- 4 Joko (even)
- 5 Rini (last-child)
👻 Pseudo-element (Menyisipkan Elemen Gaib)
Jika Pseudo-class menargetkan "kondisi/state", maka Pseudo-element mengubah bagian
tertentu dari elemen secara fisik (meskipun tag HTML-nya tidak ada). Ditandai dengan 2 tanda titik dua ( :: ).
::first-letter
Mendesain hanya huruf pertama dari baris teks seperti di majalah/koran cetak.
font-size: 300%;
color: orange;
}
::selection
Mengubah warna background & teks saat disorot/diblok dengan kursor mouse oleh pengguna.
Coba blok/sorot teks ini menggunakan mouse atau jarimu! Kamu akan melihat warna backgroundnya bukan biru default sistem, melainkan ungu. Ajaib kan?
background: purple;
color: white;
}
🪄 ::before dan ::after (Elemen Hantu Pilihan Developer)
Ini adalah pseudo-element yang paling sering dipakai! Ia mengizinkan kita menyuntikkan (inject) elemen visual
fiktif sebelum atau sesudah isi sebuah elemen, tanpa mengotori kode
HTML sama sekali! Wajib menggunakan properti content: ""; agar si hantu
muncul ke dunia nyata.
.judul::before {
content: "🔥 "; /* WAJIB ADA */
}
.judul::after {
content: " (Diskon 50%)"; /* WAJIB ADA */
color: red;
font-size: 12px;
vertical-align: super;
}
Harga Promo
📋 Ringkasan Emas
:): Menargetkan KONDISI. Misal saat
di-hover/dilewati mouse (:hover), saat sedang diketik/fokus (:focus), atau urutan keberapa dia lahir (:nth-child()).
::): Menargetkan BAGIAN KHUSUS
elemen fiktif. Misal mendandani huruf pertama agar seperti koran (::first-letter), atau mengganti gaya blok teks saat disorot biru (::selection).
::before & ::after: Teknik tingkat dewa CSS untuk menciptakan elemen
/ dekorasi visual dari ketiadaan HTML. Sangat diandalkan untuk membuat animasi tombol, tooltips,
pita ribbon, dll. Syarat utamanya jangan lupa mengetikkan content: "".