CSS ছদ্ম নির্বাচক ব্যবহার করে, যথা, :active, :hover, :link এবং :visited, আমরা একটি লিঙ্কের বিভিন্ন অবস্থা স্টাইল করতে পারি। সঠিক কার্যকারিতার জন্য, এই নির্বাচকদের ক্রম এর দ্বারা দেওয়া হয়:- :link, :visited, :hover, :active।
সিনট্যাক্স
CSS টেক্সট-ইন্ডেন্ট প্রপার্টির সিনট্যাক্স নিম্নরূপ −
a:(pseudo-selector) { /*declarations*/ }
উদাহরণ
নিম্নলিখিত উদাহরণগুলি একটি লিঙ্কের বিভিন্ন অবস্থার স্টাইলিং চিত্রিত করে −
<!DOCTYPE html> <html> <head> <style> div { margin-left: 20px; display: flex; float: left; } a:link { color: navy; text-decoration: none; } a:visited { color: yellowgreen; } a:hover { color: orange; text-decoration: wavy underline; } a:active { color: red; } </style> </head> <body> <div> <div> <a href="#">Demo link </a> </div> <div> <a href="">Demo visited link</a> </div> </div> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
প্রথম লিঙ্কটি হোভার করার সময়, আমরা নিম্নলিখিত আউটপুট −
পাই
দ্বিতীয় লিঙ্কে ক্লিক করার সময়, আমরা নিম্নলিখিত আউটপুট −
পাই
উদাহরণ
<!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> <a href="#">Kapow!</a> <a href="">Dishoom</a> </div> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
প্রথম লিঙ্কটি হোভার করার সময়, আমরা নিম্নলিখিত আউটপুট −
পাই
প্রথম লিঙ্কে ক্লিক করার সময়, নিম্নলিখিত আউটপুটটি ফিরে আসে।