Section ini membahas pseudo-classes dan pseudo-elements sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Pseudo-class :hover

Buat tombol, tautan, dan kartu merespons kursor dengan :hover, lengkap dengan resep visual dan kehati-hatian untuk perangkat sentuh.

Buka → # :focus dan :focus-visible

Kenali tiga pseudo-class fokus — :focus, :focus-visible, dan :focus-within — dan beri indikator fokus yang jelas tanpa mengganggu pengguna mouse.

Buka → # Pseudo-class :active

Beri umpan balik tekan pada tombol dan tautan dengan :active — state sesaat antara mouse ditekan dan dilepaskan.

Buka → # :checked dan :disabled

Tata state milik kontrol form — :checked untuk radio dan checkbox, :disabled dan :enabled untuk kontrol yang tidak aktif — dan intip pola kontrol kustom.

Buka → # :first-child dan :last-child

Pilih elemen berdasarkan posisinya di antara saudaranya dengan pseudo-class struktural :first-child, :last-child, :only-child, dan :empty.

Buka → # Pseudo-class :nth-child()

Kuasai aritmetika an+b pada :nth-child() untuk zebra striping, sorotan tiga teratas, hingga sintaks modern :nth-child(2 of .kartu).

Buka → # Pseudo-class :not()

Balik logika selector dengan :not() — gayai semua kecuali, rapikan margin item terakhir, dan pahami specificity dari argumennya.

Buka → # ::before dan ::after

Buat kotak tambahan dari CSS semata dengan pseudo-element ::before dan ::after — dari tanda kutip dekoratif, bullet ikon, hingga badge counter.

Buka → # ::placeholder

Tata teks petunjuk pada input dengan ::placeholder, kenali opacity bawaannya, dan gunakan :placeholder-shown untuk mendeteksi input yang masih kosong.

Buka → # Styling Interaction States

Sintesis seluruh section: rancang satu tombol dengan matriks state lengkap — default, hover, active, focus-visible, disabled — secara konsisten.

Buka →