:focus adalah pseudo-class yang digunakan untuk memilih dan menata elemen — biasanya tautan dan elemen bentuk — yang telah difokuskan oleh pengguna, baik dengan “tabbing” menggunakan keyboard atau dengan mengklik.

Elemen form, seperti <input> s, <buttons> s, dan <textareas> s dapat menerima focus baik dengan tab menggunakan keyboard atau dengan mengklik. Bidang input atau textarea berada dalam focus ketika mereka diklik dan siap untuk diketikkan.

Ketika pengguna tab melalui tautan dan elemen formulir di halaman, browser biasanya menambahkan garis putus-putus di sekitar elemen yang saat ini menerima focus tab. CSS yang ditambahkan oleh browser adalah default untuk setiap browser dan biasanya tidak terlihat sama di seluruh browser, jadi kalian mungkin ingin mengganti style default dan menggantinya dengan kalian sendiri.

Peramban menggunakan properti CSS garis besar di lembar CSS default untuk menambahkan: CSS focus ke elemen focus. Untuk menghapusnya dan menambahkan CSS focus kalian sendiri, yang harus kalian lakukan adalah menambahkan garis besar: 0; ke elemen yang: CSS focus yang ingin kalian ubah, lalu tambahkan milik kalian. Sebagai contoh:

 

Outline mirip dengan border, tetapi tidak persis sama. kalian dapat membaca lebih lanjut tentang garis besar dan perbedaannya dari batas dalam entri properti garis besar.

Saat kalian menggunakan tautan CSS: focus, kalian disarankan untuk memberikan: CSS focus setelah: link dan: CSS visited, jika tidak, CSS focus akan ditimpa oleh: tautan dan: dikunjungi. Selain tiga kelas pseudo ini, kelas: hover dan: aktif pseudo juga digunakan untuk tautan CSS, dan mereka muncul setelahnya: focus pada lembar CSS. Urutan yang disebutkan lebih disukai untuk memastikan bahwa masing-masing CSS kelas semu diterapkan bila perlu dan tidak diganti oleh CSS kelas-semu lainnya.

Contoh:

 

Cuplikan kode berikut mengubah warna latar belakang bidang fokus input dan bidang teks menjadi warna kuning terang, dengan batas merah muda.