Introduction to CSS Pseudo Classes
While designing pages in HTML, you might want to change the state of all or some of the elements of the page according to the action of user. For example, when the page is loaded one element, for example, a link will be in one state, say, it has a blue color. But once we click the link or hover the mouse, it changes to a different, say, pink. To define this special state of an HTML element we use pseudo-class. In this article, we will see how we can change the state of different elements in an HTML page by using pseudo-classes by some examples.
Syntax:
selector:pseudo-class {
property: value;
}
Now the question is what are the different values available? Those are basically different types of states. For this, you can refer to the below table of values where various state types are described.
| Value | Description |
| link | This value is used to add style to a link that is not visited. |
| visited | This value is used to add style to a link that is visited. |
| hover | This value is used to add style to an element when using hovers the mouse on it. |
| active | This value is used to add style to an element that is active. |
| focus | This value is used to add style to a focused element. |
| first-child | This value is used to add style to the first child of a parent element. |
| lang | This value is used to set a language to use in the desired element. |
How Pseudo Classes is done in CSS?
You just need to mention the required value of the state as per the syntax in your HTML code to get that state in output. That is it!! You can refer to the example section with code to see how you can implement a relative state of one or multiple elements (s) in your HTML code by the use of different pseudo-class values of CSS.
Examples
Lets us discuss examples of CSS Pseudo Classes.
Example #1
In the first example, we will see a default link which we generally see in a typical HTML page with no special style associated with the link.
Code:
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Default Link</a>
</body>
</html>
Output:
If you run the above code, you will see the below output as a default HTML link
Example #2
In the second example we will see, how a color of a default HTML link will change on the action of the user. Here the user is clicking on the link which means the link is visited by user. Once the link is clicked, the color of the link will change as per the mention in the HTML code.
Code:
<html>
<head>
<style type = "text/css">
a:visited {color: red}
</style>
</head>
<body>
<a href = "">Click here</a>
</body>
</html>
Output:
This will generate a default HTML link. Once you will click this link, it will change its color to red.
4.5 (7,568 ratings)
View Course
Example #3
In this example, we will see how a default HTML link will change its color once the user hovers the pointer onto the link. Change of the color upon hovering the mouse pointer will be what is mentioned in your HTML code. Practically it helps the user cautious that the mouse pointer is onto an HTML link by changing its color.
Code:
<html>
<head>
<style type = "text/css">
a:hover {color: pink}
</style>
</head>
<body>
<a href = "">Hover Mouse Here</a>
</body>
</html>
Output:
The above code will generate the following output.
After you hover the mouse on the link, it will change color to pink. This will make you aware of the fact that your mouse pointer is onto a link.
Example #4
In the fourth example, we will see how a default HTML link will change its color once the user clicks onto the link. Change of the color upon clicking the mouse pointer will be what is mentioned in your HTML code. Practically it helps the user aware that he or she already clicked an HTML link by changing its color.
Code:
<html>
<head>
<style type = "text/css">
a:active {color: red}
</style>
</head>
<body>
<a href = "">Click here</a>
</body>
</html>
Output:
The above code will generate the following output.
When a user clicks it, the color of the HTML link changes to red. In practical scenarios, this will help to find the already clicked links by a user in case he or she is visiting multiple links so that rework can be avoided.
Example #5
In this example, we will see how a default HTML element will change its color once the user clicks onto the element. Here we have shown an example of a text box. By default when you run the HTML code you will see a text box generated with a white background color. But whenever you click the mouse pointer inside the textbox, the background color of the text box changes. Change of the color upon clicking the mouse pointer will be what is mentioned in your HTML code. Practically it helps the user aware of that he or she already clicked an HTML element by changing its color. Do remember that, doctype is mandatory to be declared in case of focused pseudo-class value.
Code:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
input:focus {background-color: green}
</style>
</head>
<body>
<form>
Click here: <input type="text" ><br>
</form>
</body>
</html>
Output:
The above code will generate the following output.
When this textbox gets focused, its color changes to green. In a practical scenario, this will help the user to quickly identify on which HTML element he or she is clicked or focused on.
Conclusion
This concludes our learning of the topic “CSS Pseudo Classes”. As you can see how we had used different states of pseudo-classes in our HTML code examples. This article will be helpful for those who are associated with HTML designing. Practically these pseudo-classes makes end-user to aware of visited/unvisited elements in a webpage.
Recommended Articles
This is a guide to CSS Pseudo Classes. Here we discuss the introduction of CSS Pseudo Classes and How Pseudo Classes is done in CSS? with different examples along with its code implementation. You can also go through our other suggested articles to learn more –
