Pseudo-classes and all CSS Classes

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 −


 Live Demo

<!DOCTYPE html>
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);
<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>


The above code will produce the following output −

On hovering above the link −

On clicking the link −

Going back on the same page again, the link state changes to visited.