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
Selected Reading
Commonly used pseudo-classes in CSS
CSS pseudo-classes allow you to style elements based on their state or position without adding extra classes to your HTML. These powerful selectors help create interactive and dynamic styling effects.
Syntax
selector:pseudo-class {
property: value;
}
Commonly Used Pseudo-Classes
| Pseudo-Class | Description |
|---|---|
:link |
Styles unvisited links |
:visited |
Styles visited links |
:hover |
Styles elements when mouse hovers over them |
:active |
Styles elements when being clicked/activated |
:focus |
Styles elements that have keyboard focus |
:first-child |
Styles the first child element of its parent |
:lang |
Styles elements based on their language attribute |
Example: Link States
The following example demonstrates different link states −
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}
</style>
</head>
<body>
<p><a href="#">Hover over this link</a></p>
</body>
</html>
A blue link that turns red with underline when hovered, purple when visited, and orange when clicked.
Example: Focus and First-Child
This example shows focus styling and first-child selection −
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
border: 2px solid #4CAF50;
outline: none;
background-color: #f0f8f0;
}
li:first-child {
font-weight: bold;
color: #2196F3;
}
</style>
</head>
<body>
<p>Click in the input field:</p>
<input type="text" placeholder="Focus me">
<ul>
<li>First item (styled)</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
An input field with green border and light background when focused, and a list where the first item is bold and blue.
Conclusion
Pseudo-classes are essential for creating interactive user interfaces in CSS. They allow you to style elements based on user interactions and document structure without requiring JavaScript or additional markup.
Updated on: 2026-03-15T11:27:16+05:30
539 Views
Advertisements