CSS से एक्टिव HTML एंकर को हाइलाइट करें

:target सेलेक्टर का उपयोग

:target सेलेक्टर उस एलिमेंट को स्टाइल करता है जिसका ID वर्तमान URL के फ्रैगमेंट आइडेंटिफायर (हैश #id) से मेल खाता है। यह पेज के भीतर नेविगेशन हाइलाइटिंग के लिए उपयोगी है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      :target {
        border: 2px solid #D4D4D4;
        background-color: orange;
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Click any of the subject below.</p>
    <p><a href="#tut1">Maths</a></p>
    <p><a href="#tut2">Java</a></p>
    <p><a href="#tut3">C++</a></p>
    <p><a href="#tut4">C</a></p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p>This is demo text.</p>
    <p id="tut1"><b>Maths Tutorial</b></p>
    <p id="tut2"><b>Java Tutorial</b></p>
    <p id="tut3"><b>C++ Tutorial</b></p>
    <p id="tut4"><b>C Tutorial</b></p>
  </body>
</html>

जब यूजर "Maths" लिंक क्लिक करता है, URL #tut1 हो जाता है, और id="tut1" वाला पैराग्राफ नारंगी/सफेद बॉर्डर के साथ हाइलाइट होता है।