Pseudo-class

In CSS, pseudo-classes are used to select and style elements based on their state or relationship with other elements.
Pseudo-classes are preceded by a colon : and are added to the end of a selector to target specific elements that meet a particular criteria.

Syntax:

selector: pseudo-class {  
property: value;  
}

Commonly used pseudo-classes in CSS:

:hover pseudo-class

This pseudo-class selects an element when the user hovers their mouse pointer over it.
It is commonly used to change the appearance of links or buttons when hovered.

Example:

<html> 
 

<head> 
         <style>
        body {
            text-align: center;
        }

        h1:hover {
            color: red;
        }

        h2:hover {
            color: blue;
        }
    </style> 
      </head> 


<body> 
         <h1>Hello world </h1> 
         <h2>This is an example of :hover pseudo class</h2> 
      </body> 

</html>

Output:

:active pseudo-class

This pseudo-class selects an element when it is actively clicked or interacted with.
It is often used to change the appearance of buttons or links when they are clicked.

Example

<html>  

<head>  
       <style>
        body {
            text-align: center;
        }

        a:active {
            color: yellow;
        }

        h1,
        h2,
        h3 {
            color: red;
            ;
        }
    </style>  
</head>  
  

<body>  
       <h1>Hello World</h1>  
       <h2>The :active pseudo-class</h2>  
       <h3>Click the following link to see the effect</h3> 
       <a href="#">Click the link</a> 
</body>  

</html>

Output: