CSS সিউডো-ক্লাস সিলেক্টর ব্যবহার করে, যথা, :active, :hover, :link এবং :visited আমরা একটি লিঙ্ক/অ্যাঙ্করের বিভিন্ন স্টেট স্টাইল করতে পারি। সঠিক কার্যকারিতার জন্য, এই নির্বাচকদের ক্রম −
হওয়া উচিত- :লিংক
- :পরিদর্শন করেছেন
- :হোভার
- :সক্রিয়
CSS psudo-শ্রেণীর সম্পত্তির সিনট্যাক্স নিম্নরূপ -
a:(pseudo-selector) {
/*declarations*/
} উদাহরণ
CSS অ্যাঙ্কর সিউডো ক্লাস -
ব্যবহার করার জন্য একটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
font-size: 1.1em;
}
a:link {
text-decoration: none;
}
a:visited {
color: blueviolet;
}
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<h2>Your favourite sports?</h2>
<a href="#">Football</a>
<a href="">Cricket</a>
</div>
</body>
</html> আউটপুট
প্রাথমিক আউটপুট −
প্রথম লিঙ্কটি হোভার করার সময়, আমরা নিম্নলিখিত আউটপুট পাই
প্রথম লিঙ্কে ক্লিক করার সময়, নিম্নলিখিত আউটপুটটি ফিরে আসে -
আসুন CSS অ্যাঙ্কর সিউডো ক্লাস -
-এর আরেকটি উদাহরণ দেখিউদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html> আউটপুট
