CSS छद्म चयनकर्ताओं का उपयोग करना, अर्थात्:सक्रिय, :hover, :link और :visited, हम एक लिंक के विभिन्न राज्यों को स्टाइल कर सकते हैं। उचित कार्यक्षमता के लिए, इन चयनकर्ताओं का क्रम निम्न द्वारा दिया गया है:- :लिंक, :विजिटेड, :होवर, :सक्रिय।
सिंटैक्स
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> आउटपुट
यह निम्न आउटपुट देता है -
पहली कड़ी को मँडराने पर, हमें निम्नलिखित आउटपुट मिलते हैं -
पहले लिंक पर क्लिक करने के दौरान, निम्न आउटपुट वापस आ जाता है।
