Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between Pseudo-Class and Pseudo-Element in CSS
CSS pseudo-classes and pseudo-elements are powerful selectors that allow you to style elements based on their state or create virtual elements. Understanding the difference between them is crucial for effective CSS styling.
Syntax
Pseudo-classes use a single colon (:) while pseudo-elements use a double colon (::) −
/* Pseudo-class syntax */
selector:pseudo-class {
property: value;
}
/* Pseudo-element syntax */
selector::pseudo-element {
property: value;
}
Pseudo-Class
A pseudo-class targets elements in a specific state or position, such as :hover, :active, :first-child, or :last-child. They select existing elements based on their current condition.
Example: Link Hover Effect
The following example demonstrates styling links when hovered using a pseudo-class −
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: blue;
text-decoration: none;
padding: 10px;
margin: 5px;
display: inline-block;
}
a:hover {
color: tomato;
background-color: bisque;
font-size: 1.2em;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Hover over the links below:</p>
<a href="#">Link One</a>
<a href="#">Link Two</a>
</body>
</html>
Two blue links are displayed. When you hover over them, they change to tomato color with a bisque background, larger font size, and rounded corners.
Pseudo-Element
A pseudo-element creates virtual elements that don't exist in the HTML markup, such as ::before, ::after, ::first-line, or ::first-letter. They allow you to style specific parts of elements or insert content.
Example: Adding Content and Styling
This example uses both pseudo-classes and pseudo-elements to demonstrate the difference −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 10px 0;
padding: 10px;
}
/* Pseudo-element: adds virtual content */
p::after {
content: " ?";
color: gold;
font-weight: bold;
}
/* Pseudo-class: targets specific element position */
p:last-child {
font-size: 1.3em;
color: red;
background-color: lightyellow;
border-left: 4px solid red;
}
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Last paragraph</p>
</body>
</html>
Four paragraphs are displayed. Each paragraph has a gold star emoji added after the text (pseudo-element). The last paragraph is highlighted with larger red text, yellow background, and a red left border (pseudo-class).
Key Differences
| Aspect | Pseudo-Class | Pseudo-Element |
|---|---|---|
| Syntax | Single colon (:) | Double colon (::) |
| Purpose | Style elements in specific states | Create virtual elements |
| Examples | :hover, :active, :first-child | ::before, ::after, ::first-line |
| Targets | Existing HTML elements | Virtual parts of elements |
Conclusion
Pseudo-classes select existing elements based on their state or position, while pseudo-elements create virtual elements for styling specific parts or adding content. Both are essential tools for creating dynamic and visually appealing web designs.
4K+ Views
