Tautan tidak selalu menuju halaman lain — href="#bagian-2" melompat ke elemen ber-id bagian-2 pada halaman yang sama. Pseudo-class :target menandai elemen yang sedang ditunjuk fragment URL tersebut, sehingga bagian yang dituju dapat disorot, catatan kaki dapat ditandai, atau panel dapat ditampilkan — semuanya dengan CSS, tanpa JavaScript. Pada Chapter ini kita memahami cara :target bekerja, membangun pola sorotan yang umum dipakai, dan menyinggung satu variasi dengan :has().

Cara Kerja :target #

Fragment adalah bagian URL setelah tanda pagar: pada https://example.com/artikel#bagian-2, fragment-nya adalah bagian-2. Bila fragment menunjuk id yang ada, elemen dengan id tersebut berstatus :target; bila URL tidak memuat fragment, atau fragment tidak cocok dengan id mana pun, tidak ada elemen yang berstatus itu. Browser mengevaluasi ulang keadaan ini setiap kali fragment berubah — termasuk ketika pengguna mengeklik tautan anchor — sehingga gaya ikut menyesuaikan tanpa skrip:

css 
.bagian {
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid rgb(226, 232, 240);
  background-color: rgb(255, 255, 255);
  scroll-margin-top: 72px;
}

.bagian:target {
  border-left-color: rgb(217, 119, 6);
  background-color: rgb(254, 243, 199);
}
  1. Baris 1–8 (.bagian): keadaan dasar setiap bagian — border kiri abu dan latar putih. Deklarasi scroll-margin-top: 72px memberi jarak 72px antara bagian dan tepi atas viewport saat browser melompat, sehingga judulnya tidak tertutup header yang menetap.
  2. Baris 10–13 (:target): ketika fragment URL menunjuk bagian tersebut, border kirinya berubah oranye dan latarnya kuning gading — pembaca langsung melihat bagian mana yang dituju tautan.

Hasil di Browser:

text 
Saat demo dibuka tanpa fragment, seluruh bagian tampil dalam keadaan dasar:
latar rgb(255, 255, 255), border kiri rgb(226, 232, 240), dan
scroll-margin-top 72px. Panel pembanding menampilkan nilai :target secara
statis: latar rgb(254, 243, 199) dengan border kiri rgb(217, 119, 6).

Pola Sorotan dan Tombol Tutup #

Pola paling umum memasang tautan anchor dan sorotan pada bagian yang sama. Satu detail sering terlewat: fragment juga bisa dikosongkan. Tautan dengan href="#" menghapus fragment dari URL, sehingga :target nonaktif kembali — cara ringkas membuat tombol “tutup sorotan” tanpa skrip:

html index.html 
<nav>
  <a href="#bagian-2">Buka Bagian 2</a>
</nav>

<section id="bagian-2" class="bagian">
  <h3>Bagian 2</h3>
  <p>Bagian ini menyala ketika URL berakhir dengan #bagian-2.</p>
  <a href="#">Tutup sorotan</a>
</section>
  1. Tautan pertama menambahkan fragment #bagian-2 ke URL; browser menggulir ke bagian tersebut dan :target menyala.
  2. Tautan “Tutup sorotan” mengosongkan fragment; :target nonaktif dan bagian kembali ke gaya dasar — tanpa memuat ulang halaman.

Variasi dengan :has(:target) #

Bila yang perlu bereaksi adalah pembungkusnya, gabungkan dengan :has() — fitur Baseline sejak 2023 yang dibahas tuntas pada Chapter berikutnya:

css 
.daftar:has(:target) .item:not(:target) {
  opacity: 0.55;
}

Aturan ini meredupkan semua item kecuali yang menjadi target, sehingga item yang dituju menonjol dari daftarnya. Pola serupa dipakai untuk menyorot baris tabel yang ditautkan dari catatan kaki. Di luar sorotan bagian, :target juga kerap dipakai untuk panel yang muncul saat dituju — #panel-bantuan:target { display: block; } — dengan satu konsekuensi yang perlu diingat: konten yang tersembunyi di awal tidak terbaca oleh pembaca layar sampai tautannya diaktifkan, dan URL menjadi satu-satunya penanda keadaan.

Satu fitur seputar :target masih terbatas: :target-text menata teks yang dirujuk fragment teks (#:~text=...) dan saat ini hanya didukung browser Chromium. Perlakukan fitur ini sebagai penyempurnaan yang aman diabaikan, bukan fondasi desain.

Uji manual di demo:

  1. Buka demo tanpa fragment — semua bagian tampil dasar; inilah keadaan yang diperiksa probe otomatis.
  2. Klik tautan “Buka Bagian 2” — URL memuat #bagian-2, halaman menggulir dengan jarak 72px, dan bagian menyala kuning dengan border oranye.
  3. Klik “Tutup sorotan” pada bagian tersebut — fragment kosong, URL kembali polos, dan sorotan padam.

Demo chapter ini (target-sorotan.html) memuat tiga bagian, tautan buka–tutup, dan panel pembanding statis dengan lima pemeriksaan data-expected.