Pseudo-class digunakan untuk mendefinisikan status khusus suatu elemen.
Contoh: Memberi gaya pada elemen saat kursor melayang di atasnya (:hover), saat kotak input aktif menerima ketikan (:focus), atau memilih anak pertama (:first-child).
CSS Pseudo-classes
Contoh Pseudo-class :focus pada Input:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
outline: none;
border: 2px solid #04AA6D;
background-color: #f0fdf4;
box-shadow: 0 0 8px rgba(4, 170, 109, 0.4);
}
</style>
</head>
<body>
<h3>Klik di dalam kotak input:</h3>
<input type="text" placeholder="Ketik nama Anda..." style="padding:10px; border-radius:6px; border:1px solid #ccc;">
</body>
</html>Efek :focus memberi isyarat visual yang jelas kepada pengguna tentang kolom mana yang sedang aktif diisi.
Uji Pemahaman Singkat (Test Yourself):
Pseudo-class apa yang dipicu saat sebuah kotak input sedang diklik atau siap menerima ketikan pengguna?