Umpan balik fokus biasanya diberikan pada elemen yang difokuskan — tetapi sering kali komponen yang perlu menonjol adalah pembungkusnya: kartu form, panel pencarian, atau baris tabel yang berisi isian. Melakukannya dengan JavaScript berarti memasang dan melepas class pada setiap induk; pseudo-class :focus-within menyelesaikan hal yang sama dalam satu selector CSS. Pada Chapter ini kita memahami cakupannya, menerapkannya pada panel form, lalu menggabungkannya dengan :focus-visible agar sorotan tetap tepat sasaran.

Cara Kerja :focus-within #

Selector .panel:focus-within cocok dengan elemen .panel bila panel itu sendiri difokuskan, atau bila salah satu keturunannya sedang difokuskan. Keadaan ini diikuti secara langsung: fokus masuk, aturan berlaku; fokus keluar, gaya dasar kembali. Perbedaannya dengan :focus terletak pada titik pandang — :focus menunjuk elemen yang difokuskan itu sendiri, sedangkan :focus-within menunjuk pembungkus yang berisi fokus — dan pembungkus itu sendiri tidak perlu dapat difokuskan. Panel berikut memakai pola tersebut:

css 
.panel {
  width: 340px;
  padding: 16px;
  border: 2px solid rgb(226, 232, 240);
  border-radius: 12px;
  background-color: rgb(255, 255, 255);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.panel:focus-within {
  border-color: rgb(37, 99, 235);
  background-color: rgb(239, 246, 255);
}
  1. Baris 1–8 (.panel): keadaan dasar panel — border abu dan latar putih, dengan transisi singkat agar pergantian keadaan tidak menyentak.
  2. Baris 10–13 (:focus-within): saat salah satu isian di dalam panel menerima fokus, border berubah biru dan latar menjadi biru sangat muda rgb(239, 246, 255).
  3. Pembagian peran: panel menyorot konteks, sedangkan isian tetap menampilkan cincin fokusnya sendiri lewat :focus-visible — dua lapis umpan balik yang saling melengkapi.

Satu nuansa yang perlu diantisipasi: :focus-within berlaku pada seluruh rantai leluhur, bukan hanya pembungkus terdekat. Bila panel berada di dalam kartu, kedua elemen cocok pada saat yang sama dan sorotan bertumpuk di setiap tingkat. Desain yang tenang biasanya membatasi gaya :focus-within pada satu tingkat pembungkus saja — hanya panel, misalnya — dan membiarkan leluhur di atasnya tetap netral. Pola lain yang ringkas: baris tabel yang berisi isian ikut menyala lewat tr:focus-within { background-color: rgb(239, 246, 255); }, tanpa skrip yang memasang class pada <tr>.

Hasil di Browser:

text 
Panel dalam keadaan dasar berlatar rgb(255, 255, 255) dengan border
rgb(226, 232, 240). Panel pembanding menampilkan nilai :focus-within secara
statis: latar rgb(239, 246, 255) dan border rgb(37, 99, 235).
Input di dalam panel berborder rgb(203, 213, 225) sebelum difokuskan.

Kombinasi dengan :focus-visible #

:focus-within tidak membedakan asal fokus — klik mouse pun ikut menyalakan sorotan panel. Bila sorotan seharusnya eksklusif untuk pengguna keyboard, gantikan dengan kombinasi :has():

css 
.panel:has(:focus-visible) {
  border-color: rgb(37, 99, 235);
  background-color: rgb(239, 246, 255);
}

Selector ini menyorot panel hanya bila isian di dalamnya berstatus :focus-visible, sehingga klik mouse tidak menyalakan latar biru. Keputusan ini tidak memengaruhi aksesibilitas: isian tetap menerima fokus apa pun caranya; yang berubah hanya tampilan sorotannya. :has() merupakan Baseline sejak 2023; pembahasan lengkapnya ada pada Chapter :has() . Untuk panel yang memang boleh bereaksi pada fokus apa pun — misalnya panel pencarian — :focus-within tetap pilihan yang paling ringkas.

Menguji di Demo #

Keadaan fokus tidak dapat ditekan otomatis oleh harness, sehingga probe demo memeriksa gaya dasar dan panel pembanding; perilaku lengkapnya diuji manual:

  1. Buka demo, klik input teks pada panel pertama — border panel berubah biru dan latarnya biru muda, meskipun yang difokuskan hanyalah isian di dalamnya.
  2. Tekan Tab — fokus berpindah; sorotan panel menyala mengikuti isian yang aktif.
  3. Tekan Tab sampai fokus keluar dari panel — gaya dasar kembali: border abu dan latar putih.
  4. Bandingkan dengan panel kedua — panel pembanding menampilkan nilai akhir :focus-within secara statis, sehingga dokumentasi gaya tetap lengkap meskipun harness tidak dapat menekan Tab.