Difference Between Pseudo-Classes and Pseudo-Elements in CSS
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 = "" >GeekforBeginner</ a > </ body > </ html > |
Output:
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:
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;} |
Contact Us