CSS में :active छद्म वर्ग

छद्म वर्ग (Pseudo-class) किसी तत्व या CSS सेलेक्टर की विभिन्न अवस्थाओं को दिखाने के लिए उपयोग किया जाता है। :active छद्म वर्ग दर्शाता है कि तत्व सक्रिय अवस्था में है (उदाहरण: माउस बटन दबाए रखने के दौरान)।

यह छद्म वर्ग मुख्य रूप से लिंक्स, बटन्स, या किसी भी तत्व से जुड़ा होता है जो सक्रिय हो सकता है।

सिंटैक्स

a:active { color: green; }

उदाहरण

<html> 
  <head> 
    <style> 
      a:active { color: green; } 
    </style> 
  </head> 
  <body> 
    <a href="https://www.tutorialspoint.com">सीखने के लिए यहां क्लिक करें</a> 
  </body> 
</html>

व्याख्या

जब आप लिंक पर क्लिक करके रखते हैं, तो यह हरा हो जाता है। माउस बटन छोड़ने पर यह सामान्य अवस्था में वापस आ जाता है।

उदाहरण: फ़ॉन्ट आकार बदलना

<html> 
  <head> 
    <style> 
      a:active { font-size: 20px; } 
    </style> 
  </head> 
  <body> 
    <a href="https://www.tutorialspoint.com">सीखने के लिए यहां क्लिक करें</a> 
  </body> 
</html>

व्याख्या

यह लिंक के फ़ॉन्ट आकार को क्लिक करते समय 20px कर देगा।

उदाहरण: बॉडी पर सक्रिय अवस्था

<html> 
  <head> 
    <style> 
      body:active { 
        background: seagreen; 
      } 
    </style> 
  </head> 
  <body> 
    <div>इस विंडो में कहीं भी क्लिक करें</div> 
  </body> 
</html>

व्याख्या

जब आप स्क्रीन पर कहीं भी क्लिक करके रखते हैं तो पृष्ठभूमि रंग सीग्रीन हो जाएगा।

उदाहरण: बटन पर सक्रिय अवस्था

<html> 
  <head> 
    <style> 
      #thisButton:active { color: red } 
    </style> 
  </head> 
  <body> 
    <button id="thisButton">मुझे क्लिक करें!!</button> 
  </body> 
</html>

व्याख्या

बटन टेक्स्ट का रंग क्लिक करते समय लाल हो जाएगा।

ब्राउज़र संगतता