Difference Between Pseudo-Classes and Pseudo-Elements in CSS

Last Updated : 29 Dec, 2023

Pseudo-classes and pseudo-elements in CSS are selectors that allow the styling of specific states or parts of elements. Pseudo-classes target states like ‘: hover’ or ‘: active’, while pseudo-elements like ‘ ::before ‘ or:: after’ style specific parts of an element. They enhance CSS styling by providing more granular control over elements’ appearance based on user interactions or document structure. In this article, we will learn the differences between Pseduo-Classes and Psedu-Elements.

Note: The single colon : refers to pseudo-classes and The double colon :: refers to pseudo-elements

Pseudo-Classes

Pseudo-Classes in CSS selects the element and changes the state of the element based on the user interaction. For Example, Changing the color of the element when the user over it or when the user visits the link.

Syntax

selector: pseudo-class{
    property: value;
}

Example 1: The following example illustrates the: hover pseudo class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <style> 
        a{ 
            font-size: 50px; 
            height: 30px; 
            text-decoration: none; 
        } 
         a:hover{ 
             color: green; 
         } 
    </style> 
</head> 
    
<body> 
     <a href="">GeekforGeeks</a> 
</body> 
    
</html>

Output:

gfgvideo

Pseudo-Elements

The Pseduo-Elements in CSS is a keyword that is used to style specific part of the element.Pseudo-elements target a specific part of an element’s content or structure. Pseudo-elements are denoted by a double colon (::) before the element they style. For Example. You can insert the content after or before the element using the Pseudo-Elements.

Syntax

selector::pseudo-element {
     property: value;
}

Example 1: The following example demonstrates the simple Pseudo-Element in CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"> 
    <style> 
       p::first-line{ 
        color: red; 
       } 
    </style> 
</head> 
    
<body>      
    <p> 
        This is the first Pseudo element Class 
        Some more text. And even more, and more,  
          and more, and more,  and more, and more, 
        and more, and more, and more, and more,  
        and more, and more. 
    </p> 
</body> 
    
</html>

Output:

video

Difference between Pseudo-Classes and Pseudo-Elements

Pseudo-Classes	Pseudo-Elements
Pseudo-Classes are based on state or user interaction on the element	Pseudo-elements style the specific part of an element.
Pseduo Classes starts with (‘ : ‘) name	Peudo-Elements begins with (‘ :: ‘) double colon.
It can used with mutlple selector, allowing condition	Pseudo Elements mostly used alone and targets the specfict parts of an element
Pseduo-classes examples are : element:hover{color:red;}	Pseudo-Element examples are : element::first-line{ font-size:weight:bold;}