কম্পিউটার টিউটোরিয়াল

CSS-এ :active সিউডো ক্লাস


সিউডো ক্লাস একটি এলিমেন্ট বা CSS সিলেক্টরের ভিন্ন অবস্থা দেখানোর জন্য ব্যবহৃত হয়। :active সিউডো ক্লাস এলিমেন্টটি সক্রিয় অবস্থায় আছে কিনা তা নির্দেশ করে।

এই সিউডো ক্লাস głównie লিংক, বাটন বা যেকোনো সক্রিয় হতে পারা এলিমেন্টের সাথে যুক্ত থাকে।

উদাহরণস্বরূপ, লিংকের সাথে যুক্ত থাকলে লিংকটি সক্রিয়।

সিনট্যাক্স

a:active { color: green; }

:active সিউডো ক্লাস-এর ব্যবহার বিভিন্ন পরিস্থিতিতে দেখুন:

উদাহরণ

<html>
<head>
  <style>
    a:active { color: green; }
  </style>
</head>
<body>
  <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

ব্যাখ্যা

প্রথমবার লিংকটি স্বাভাবিক লিংক রংয় (নীল) দেখাবে এবং লিংকটি ক্লিক করলে হরিত হয়ে যাবে।

উদাহরণ

<html>
<head>
  <style>
    a:active { font-size: 20px; }
  </style>
</head>
<body>
  <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

ব্যাখ্যা

লিংকটি ক্লিক করার সময় ফন্ট আকার ২০পিক্সেল হয়ে যাবে।

উদাহরণ

<html>
<head>
  <style>
    body:active {
      background: seagreen;
    }
  </style>
</head>
<body>
  <div>এই উইন্ডোর যেকোনো জায়গায় ক্লিক করুন</div>
</body>
</html>

ব্যাখ্যা

স্ক্রিনের যেকোনো জায়গায় ক্লিক করলে ব্যাকগ্রাউন্ড রং seagreen হয়ে যাবে।

উদাহরণ

<html>
<head>
  <style>
    #thisButton:active { color: red }
  </style>
</head>
<body>
  <button id="thisButton">Click Me!!</button>
</body>
</html>

ব্যাখ্যা

বাটনে ক্লিক করলে বাটনের টেক্সট রং লাল হয়ে যাবে।

ব্রাউজার সামঞ্জস্য

Chrome Firefox Edge IE Safari Opera
1 1 Yes 4 1 5

  1. CSS দিয়ে লিংক স্টাইলিং — লিংক স্টেট (link, visited, hover, active)

  2. CSS Pseudo Elements

  3. CSS-এ স্ট্যান্ডার্ড লিংক স্টাইল ও ডিফল্ট রঙ

  4. CSS :focus-within সিউডো ক্লাস