Pseudo-Classes in CSS

Posted By: Rimjhim Jain Published: 14, Jan 2024

To Specify the special state of the selected elements we use Pseudo-class keywords in CSS. We can combine these keywords with a CSS selector to add an effect to existing elements based on their states. For Example, how our element will behave when we hover over it or how the property of elements changes when we click them or just visit them.

The syntax for pseudo-classes is:

selector: pseudo-class { 
   property: value; 
}

There are many pseudo-classes in CSS but the most commonly used are:

• :hover - The :hover pseudo-class is applied when the user hover it's mouse pointer over the element. An example of using the :hover pseudo-class on a
  element is:

div:hover { 
  background-color: red; 
}

It will change the color of div element to red whenever user will hover over it.




• :link - The :link pseudo-class represent links which are not visited by users. An example of using the :link pseudo-class on an  element is:

a:link {
  color: green; 
}

The link which is not visited till yet will have green color.




• :visited - The :visited pseudo-class represent links which are visited by users. An example of using the :visited pseudo-class on a element is:

 a:visited {
   color: purple; 
}

The link which is already visited by user will have purple color.




• :active - The :active pseudo-class is used to represent elements that are activated by users. In simple language the element (such as button, link etc.) on which we will click, it's property will change as defined. An example of using the :active pseudo-class on a button element is:

 button:visited {
   color: pink; 
}

When we click(active) on this button then it's color will change to pink.




• :lang - The :lang pseudo-class is used to select elements with the language attribute with the specified value. An example of using the :lang pseudo-class on a element is:

 p:lang(eng) {
   background-color: orange;
} 

//here the term in "( )"is the language attribute on which  you want to style.

The background color of text of your paragraph whose language is eng(English) will become orange.




• :first-child - The :first-child pseudo-class selects the specified selector ,if it is the first child of its parents. An example of using the :first-child pseudo-class on a element is:

 p:first-child  {    
   background-color: teal;
}

The background color of first child of the paragraph will change to teal.




• :focus - The :focus pseudo-class selects the element(such as input element) that has been focused by user(usually by tapping on the element).An example of using the :focus pseudo-class on an element is:

 input:focus {       
    background-color: gray;
}

The background color of input element will change to gray when we focus on it(like by clicking on it).