Difference Between Pseudo-Class and Pseudo-Element in CSS


Pseudo-Class

A pseudo-class represents a state of a selector like :hover, :active, :last-child, etc. These start with a single colon(:).

Syntax

The syntax of CSS pseudo-class is as follows −

:pseudo-class{
   attribute: /*value*/
}

Pseudo-Element

Similarly, a pseudo-element is used to select virtual elements like ::after, ::before, ::first-line, etc. These start with a double colon(::).

Syntax

The syntax of CSS pseudo-element is as follows −

::pseudo-element{
   attribute: /*value*/
}

Change the Link on Hover

The following example illustrate changing the link on hover using the CSS pseudo class −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      a:hover{
         padding: 3%;
         font-size:1.4em;
         color: tomato;
         background: bisque;
      }
   </style>
</head>
<body>
   <p>You're somebody else</p>
   <a href=#>Dummy link 1</a>
   <a href=#>Dummy link 2</a>
</body>
</html>

Change the Paragraph

Here, we have set a different style for paragraph text using the CSS pseudo class and element. Let us see the example −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      p::after {
         content: " BOOM!";
         background: hotpink;
      }
      p:last-child {
         font-size: 1.4em;
         color: red;
      }
   </style>
</head>
<body>
   <p>Demo Text</p>
   <p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
   <p>Hit</p>
   <p>Pop</p>
</body>
</html>

Updated on: 01-Nov-2023

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements