Antarmuka yang baik merespons tindakan pengguna secara jelas. Section ini membahas pseudo-class interaksi dari hover hingga :has() yang memungkinkan styling berdasarkan kondisi anak, serta menghormati preferensi gerakan pengguna.

# Hover dan Active

Berikan umpan balik visual saat kursor melayang di atas elemen dan saat elemen ditekan dengan pseudo-class :hover dan :active.

Buka → # Focus dan Focus-visible

Bedakan :focus dan :focus-visible agar indikator fokus muncul tepat bagi pengguna keyboard tanpa mengganggu pengguna mouse.

Buka → # Focus-within

Sorot kartu atau panel form secara otomatis ketika salah satu isian di dalamnya menerima fokus dengan :focus-within.

Buka → # Checked dan Disabled

Gaya kontrol form berdasarkan keadaannya: kotak terpilih dengan :checked serta isian terkunci dan aktif dengan :disabled dan :enabled.

Buka → # Required dan Invalid

Tandai isian wajib dan bermasalah dengan :required, :valid, dan :invalid, lalu perbaiki pengalamannya dengan :user-valid dan :user-invalid.

Buka → # :target

Sorot bagian halaman yang dituju fragment URL dengan pseudo-class :target, lengkap dengan pola buka dan tutup.

Buka → # :has()

Pilih elemen berdasarkan isi atau saudaranya dengan selector relasional :has(), dari kartu bergambar hingga form dengan isian bermasalah.

Buka → # prefers-reduced-motion

Hormati preferensi gerakan pengguna dengan media query prefers-reduced-motion melalui dua pola pembungkusan animasi.

Buka →