Pseudo-classes with CSS Classes

The pseudo-classes can also be combined with the CSS Classes. The basic syntax would be :
 selector.class_name:pseudo-class {
    property: value;
 }
Example :
<!DOCTYPE>
<html>
<head>
  <style>
    p.FirstP:hover {
      background-color: yellow;
      color: blue;
      font-weight: bold;
    }
    p.SecondP:hover {
      background-color: gray;
      color: red;
    }
  </style>
</head>
<body>
   <p class="FirstP">Hello world This is The first Paragraph</p>
   <p class="SecondP">Hello world This is The Second Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph


Next Topic :