Pseudo-classes and all CSS Classes

CSS Web Development Front End Technology

The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc.

Following is the code demonstrating the pseudo classes in CSS −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
   font-size: 18px;
   font-weight: bold;
}
a:link {
   color: rgb(17, 0, 255);
}
a:visited {
   color: rgb(128, 0, 107);
}
a:hover {
   color: rgb(255, 105, 243);
}
a:active {
   color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover , click on the above link to see the pseudo class in action</h2>
</body>
</html>