CSS pseudo-class

The CSS pseudo-classes are the CSS special characters with the preceding colon which is used to add the special effects to an element. The CSS pseudo-classes are used with the CSS selectors to provide a special effect to any existing HTML element.

Syntax

selector: pseudo-class {

property: value;

}

Examples

  • The :hover is used to change the color of any element or button when you move the cursor over it.
  • The :visited pseudo-class displays the visited links by changing the color of the link from blue to purple.

Pseudo Classes

The CSS offers several pseudo-class, out of which the most used classes along with their explanation and implementation are given below:

CSS :hover Pseudo-class

The :hover class is used when we want give some effect to any button or element. Basically, this class changes the color of the element or button when we move the cursor over it.

Syntax

HTML element/selector :hover {

/*CSS property*/

}

Example

In the given example, we have created a block using the <div> element and also set out the :hover property to the <div> element. The background color of the block is set out to red and when we move the cursor over the block the color turns into yellow.

<!DOCTYPE html>
<html>
<head>
	<title>CSS pseudo-class</title>
	<style>
		div {
		  background-color: #fc1c03;
		  color: white;
		  padding: 25px;
		  text-align: center;
		}

		div:hover {
		  background-color: #fcba03;
		}
	</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

Output

CSS :active pseudo-class

The :active pseudo-class is set out to make any element or link-activated when the user clicks on it.

Syntax

HTML element/selector :active {

/* CSS Property*/

}

Example

In the given example, we have created a button using the <button> element and sets the height width and margin property of the button. Then, we set the button: active property that allows the button to change color when someone click on it.

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS Pseudo-class</title> 
    <style> 
    button{ 
        background-color: red; 
        width: 300px; 
        height: 200px; 
        margin: auto; 
        font-size: 40px; 
        text-align: center; 
        border: none;
    } 
  
    button:active{ 
        background-color: yellow;
        border: none; 
    } 
  
    </style> 
</head> 
  
<body> 
     <button>Click Me!</button> 
</body> 
</html>                     

Output

CSS :visited Pseudo class

The :visited pseudo-class is used to highlight the links that are already visited by the user. By default, this class turns the color of the link from blue to purple when the user clicks on the link.

Syntax

HTML element/selector:visited {

/* CSS Property*/

}

Example

In the given example, a link is created by using the <a> tag. Then, the CSS property a:visited is set so that whenever we click on the link, the color of the link changes.

Other CSS pseudo-classes

S. no.

Pseudo-class

Description

1. :checked This pseudo-class is used when we want to set some CSS property to the checked attribute of <input> element. This class selects all the checked attribute elements and applies the properties to all of them.
2. :disabled This pseudo-class disabled all the <input type=" text"> field and also provides the light grey background-color to them.
3. :empty This pseudo-class is used to set styling to for all the <p> elements with no children.
4. :enabled This pseudo-class is used when we want to enable all the <input type=" text"> fields.
5. :first-child This pseudo-class is used to style the element that is the first child of any HTML element.
6. :focus This pseudo-class is used to get focused on any element whenever the user clicks on it.
7. :in-range This pseudo-class is used to set the CSS property to all the elements that have value within the particular range.
8. :invalid This pseudo-class is used to set the styling properties for the form element that are not validated according to the element's setting.
9. :lang This pseudo-class is used to set styling to all the elements with a lang attribute.
10. :last-child This pseudo-class is used to set the CSS properties to all last child of the HTML element.
11. :link This pseudo-class is used to style all the unvisited links within a webpage. The user can not style the already visited links.
12. :not This pseudo-class set out the styling to those elements that are not specified in : not selector.
13. :nth-child(n) This pseudo-class is used to provide styling to the nth-child of any HTML element irrespective of its type and parent element.
14. :nth-of-type(n)

This pseudo-class is used to set the CSS properties to the nth-child of a particular type of HTML element, counting from the last nth element.

n = number, keyword, or formula.

15. only-of-type This pseudo-class is used when we want to set the CSS styling properties to the element that are the only child of its type or its parent.
16. :nth-last-of-type(n) This pseudo-class is used to set the CSS properties to the nth-child of a particular type of HTML element, counting from the last child.
17. :only-child This pseudo-class selects and sets the CSS properties to all the elements that are the only child of its parent.
18. :optional This pseudo-class is used to set the styling to the form elements that have no attribute.
19. :out-of-range This pseudo-class is used to set the CSS properties to the <input> elements that have min or max attributes.
20. :read-only This pseudo-class is used to set the CSS properties to only those <input> element that has read-only attribute.
21. :read-write This pseudo-class is used to set the CSS properties to the <input> element that is both readable or writeable has no read-only and disabled attribute.
22. :required This pseudo-class is used to set the CSS properties to the <form> elements that consist of the required attributes. This can be applied only on the input, select, and textarea.
23. :root This pseudo-class is used to set the CSS property for the root element of the web page which is by default the <HTML> element.
24. :target This pseudo-class is used to set the CSS properties for all the active target links. This is basically used for the href attribute of <a> element that contains a value with preceding #.
25. :valid This pseudo-class is used for the form elements such as input elements with email filed, text area, min or max value, etc. So this class is basically used to indicate an error when the user enters the incorrect value by changing its styling properties.
26. :visited This pseudo-class is used to select the visited link.
27. :active This pseudo-class is used to set the styling for the active links.
28. :first-of-type This pseudo-class is used to style the CSS element which is the first child of the <HTML> element.
29. :hover This pseudo-class is used when we want any element, button or link to change color when we move the cursor over it.
30. :last-of-type This pseudo-class is used to style every last child of a particular type of its parent.