PSEUDO-CLASSES IN CSS

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.

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 :

before_hover
Output before hover

After 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