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

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


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

এই সিউডো ক্লাস প্রধানত লিংকের সাথে যুক্ত থাকে।

সিনট্যাক্স

a:visited { color: green; }

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

উদাহরণ

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

ব্যাখ্যা

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

উদাহরণ

<html>
<head>
  <style>
    /* :visited স্টেট দৃশ্যমান করতে ডিফল্ট স্টাইল সেট করা হয়েছে */
    a { background-color: white; border: 1px solid white; }
    a:visited { border: yellow; }
  </style>
</head>
<body>
  <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

ব্যাখ্যা

এই উদাহরণে একবার লিংক ভিজিট হলে লিংকে ১পিক্সেল হলুদ রঙের বর্ডার যোগ হবে।

উদাহরণ

<html>
<head>
  <style>
    /* :visited স্টেট দৃশ্যমান করতে ডিফল্ট স্টাইল সেট করা হয়েছে */
    a { background-color: white; }
    a:visited { background-color: seagreen; }
  </style>
</head>
<body>
  <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

ব্যাখ্যা

লিংকটি একবার ভিজিট করলে ব্যাকগ্রাউন্ড রং seagreen হয়ে যাবে।

স্টাইলিং সীমাবদ্ধতা

গোপনীয়তা ও নিরাপত্তার কারণে :visited সিউডো ক্লাস সীমিত CSS প্রপার্টির সাথে কাজ করে যেমন color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color এবং SVG অ্যাট্রিবিউট fill ও stroke।

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

Chrome Firefox Edge IE Safari Opera
1 1 Yes Yes 1 3.5

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

  2. CSS Pseudo Elements

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

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