Share the post

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.

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.



    <h1>CSS : Pseudo-classes Example</h1>
        div {

            background-color: brown;
            color: white;


            background-color: aqua;


    <div>Hover the mouse to change the color from brown to aqua</div>



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 :

Output before hover

After Hover :

Output 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.

Leave a Comment