Hello All, Today we will discuss the pseudo-classes in CSS. In this topic, we will discuss What are Pseudo-classes? What are the benefits of using pseudo-classes ?. Syntax for Pseudo-classes ?etc. If you want to learn more about CSS then you must read here.
Table of Contents
What are the Pseudo-classes?
The Pseudo-classes in CSS are added to a particular selector that specifies the state of elements.
Syntax of Pseudo-class :
selector : pseudo-class{
CSS Property : Value
}Example of Pseudo-class :
Now, We will understand the simple Pseudo-class hover with examples.
HTML & CSS
<html>
<head>
<h1>CSS : Pseudo-classes Example</h1>
<style>
div {
background-color: brown;
color: white;
}
div:hover{
background-color: aqua;
}
</style>
</head>
<body>
<div>Hover the mouse to change the color from brown to aqua</div>
</body>
</html>In this above example we will see that initially, div has a background color brown but after we hover on div then the div background color changes to aqua as shown in the below outputs :
Before Hover :
After Hover :
So, we have seen the uses of Pseudo class hover.
What are the benefits of using pseudo-classes?
- => To identify that the user visited a particular link or not.
- => To identify the special element by using hover it.
- => To focus on a particular element.