CSS Pseudo class


Go to main Page

Pseudo Class in CSS

To define a special state of the element we use pseudo-classes.

Basic Syntax


      selector:pseudo-class {
  property: value;
}
  


Anchor Pseudo-classes

Links can be displayed in differient ways.

We have already studied the hover, lets see other ways for the anchor tag.

Example


    /*This is mouse over link */
a:hover {
  color: orangered;
}


/*This is visited link */
a:visited {
  color:orangered;
}
   /*This is unvisited link */
a:link {
  color: orangered;
}
/*This is selected link */
a:active {
  color: orangered;
}



Tooltip Hover

The container will be displayed when we mouse over it.

Example


    <!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div{
      width: 300px;
      height: 100px;
      background-color: orangered;
    }
    p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
  </style>
</head>
<body>
  <div>
    <p>this is p</p>
  </div>

</body>
</html>



Hover on div

The container will change color on mouse over.


    <!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div{
      width: 300px;
      height: 100px;
      background-color: orangered;
    }
 

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

</body>
</html>


Tip:In some cases, the pseudo-class is very helpful in designing our layout of the webpage.