Pseudo-classes in CSS
- Siddharth Sharma
- Mar 3, 2025
- 3 min read
1. Definition
Pseudo-classes are keywords added to CSS selectors that specify a special state of the selected element(s).
They allow you to style elements based on their state, position, or relationship with other elements, beyond what is possible with simple selectors.
2. Syntax
Pseudo-classes are prefixed with a colon (:).
General syntax:
css
selector:pseudo-class {
property: value;
}
Example:
css
a:hover {
color: red;
}
3. Common Pseudo-classes
State-based Pseudo-classes:
:hover - Applies when the user hovers over an element.
:active - Applies when an element is being activated (e.g., clicked).
:focus - Applies when an element receives focus (e.g., input fields).
:visited - Applies to links that have been visited.
:link - Applies to unvisited links.
Structural Pseudo-classes:
:first-child - Selects the first child of a parent element.
:last-child - Selects the last child of a parent element.
:nth-child(n) - Selects the nth child of a parent element (e.g., :nth-child(2) for the second child).
:nth-of-type(n) - Selects the nth element of its type within a parent.
:not(selector) - Selects elements that do not match the given selector.
Form-related Pseudo-classes:
:checked - Applies to checked radio buttons or checkboxes.
:disabled - Applies to disabled form elements.
:enabled - Applies to enabled form elements.
:valid - Applies to form elements with valid input.
:invalid - Applies to form elements with invalid input.
Other Pseudo-classes:
:root - Selects the root element of the document (usually <html>).
:empty - Selects elements with no children or text content.
:target - Selects the element with an ID matching the URL's fragment identifier.
4. Usage Examples
Hover Effect:
css
button:hover {
background-color: blue;
}
First Child Styling:
css
li:first-child {
font-weight: bold;
}
Alternate Row Colors in a Table:
css
tr:nth-child(odd) {
background-color: #f2f2f2;
}
Styling Valid and Invalid Inputs:
css
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
5. Combining Pseudo-classes
Pseudo-classes can be combined for more specific targeting.
Example:
css
a:hover:focus {
color: purple;
}
6. Pseudo-classes vs Pseudo-elements
Pseudo-classes target specific states or positions of elements.
Pseudo-elements (e.g., ::before, ::after) target specific parts of an element or generate content.
Conclusion
· Pseudo-classes are a powerful tool in CSS for styling elements based on their state, position, or relationship with other elements.
· They enable dynamic and interactive styling without the need for JavaScript in many cases.
Here’s an example of using pseudo-classes in CSS with an HTML structure:
HTML Code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-class Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pseudo-class Example</h1>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<a href="#">Click Me</a>
<input type="text" placeholder="Enter your name">
</body>
</html>
CSS Code (styles.css):
css
/* Style the first list item */
li:first-child {
color: red;
font-weight: bold;
}
/* Style every odd list item */
li:nth-child(odd) {
background-color: #f2f2f2;
}
/* Change link color on hover */
a:hover {
color: green;
text-decoration: underline;
}
/* Style the input when it is focused */
input:focus {
border: 2px solid blue;
outline: none;
padding: 5px;
}
Explanation:
li:first-child:
Targets the first <li> element and makes its text red and bold.
li:nth-child(odd):
Applies a light gray background to every odd-numbered <li> element.
a:hover:
Changes the link color to green and underlines it when the user hovers over it.
input:focus:
Adds a blue border and padding to the input field when it is focused (clicked or selected).
Output:
The first list item will be red and bold.
Every odd list item will have a light gray background.
The link will turn green and underline when hovered.
The input field will have a blue border and padding when focused.
This example demonstrates how pseudo-classes can dynamically style elements based on their state or position.
Comments