Tạo kiểu highlight neo (anchor) đang active với CSS

Bộ chọn :target

:target chọn phần tử có id khớp với **fragment identifier** (phần sau #) trong URL hiện tại. Dùng cho: highlight nội dung, tab CSS-only, modal, smooth scroll highlight.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    :target {
      border: 2px solid #D4D4D4;
      background-color: orange;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Click vào môn học dưới đây:</p>
  <p><a href="#tut1">Toán</a></p>
  <p><a href="#tut2">Java</a></p>
  <p><a href="#tut3">C++</a></p>
  <p><a href="#tut4">C</a></p>
  <p>Nội dung khác...</p>
  <p id="tut1"><b>Hướng dẫn Toán</b></p>
  <p id="tut2"><b>Hướng dẫn Java</b></p>
  <p id="tut3"><b>Hướng dẫn C++</b></p>
  <p id="tut4"><b>Hướng dẫn C</b></p>
</body>
</html>

Click "Toán" → URL thêm #tut1 → đoạn id="tut1" khớp :target → highlight cam. Không cần JavaScript.