CSS Pseudo Classes
What are CSS Pseudo Classes?
CSS pseudo-classes are keywords added to CSS selectors to style an element based on its current state or position. They allow you to change the appearance of elements when users interact with them, such as hovering over a button, clicking a link, focusing on an input field, or selecting the first child of a parent element.
Why Use CSS Pseudo Classes?
Pseudo-classes make webpages more interactive and user-friendly. They are commonly used for navigation menus, buttons, forms, tables, image galleries, and improving the overall user experience without using JavaScript.
Common CSS Pseudo Classes
Basic Pseudo Class Syntax
<!DOCTYPE html>
<html>
<head>
<style>
button:hover{
background:blue;
color:white;
}
</style>
</head>
<body>
<button>
Hover Me
</button>
</body>
</html>Step 1: Using :hover
The :hover pseudo-class changes an element’s appearance when the mouse pointer moves over it.
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding:12px 20px;
background:#007BFF;
color:white;
border:none;
cursor:pointer;
}
button:hover{
background:#0056b3;
}
</style>
</head>
<body>
<button>
Hover Over Me
</button>
</body>
</html>Step 2: Using :active
The :active pseudo-class styles an element while it is being clicked.
<!DOCTYPE html>
<html>
<head>
<style>
button{
padding:12px 20px;
background:#28a745;
color:white;
border:none;
}
button:active{
background:#145c2d;
}
</style>
</head>
<body>
<button>
Click Me
</button>
</body>
</html>Step 3: Using :focus
The :focus pseudo-class styles an input field when the user clicks or tabs into it.
<!DOCTYPE html>
<html>
<head>
<style>
input{
padding:10px;
border:2px solid gray;
}
input:focus{
border-color:#007BFF;
outline:none;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>Step 4: Using :first-child
The :first-child pseudo-class selects only the first child element inside its parent.
<!DOCTYPE html>
<html>
<head>
<style>
li:first-child{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Step 5: Using :nth-child()
The :nth-child() pseudo-class selects elements based on their position. It is useful for styling alternate rows or specific list items.
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even){
background:#f2f2f2;
}
table{
border-collapse:collapse;
}
td{
border:1px solid #ccc;
padding:10px;
}
</style>
</head>
<body>
<table>
<tr><td>HTML</td></tr>
<tr><td>CSS</td></tr>
<tr><td>JavaScript</td></tr>
<tr><td>Python</td></tr>
</table>
</body>
</html>Complete CSS Pseudo Classes Example
<!DOCTYPE html>
<html>
<head>
<style>
button{
background:#007BFF;
color:white;
border:none;
padding:12px 20px;
cursor:pointer;
}
button:hover{
background:#0056b3;
}
button:active{
background:#003f7f;
}
input{
padding:10px;
border:2px solid gray;
margin-top:15px;
}
input:focus{
border-color:#007BFF;
outline:none;
}
</style>
</head>
<body>
<button>
Submit
</button>
<br><br>
<input type="text" placeholder="Type something">
</body>
</html>Advantages of CSS Pseudo Classes
Best Practices
- Use :hover to provide visual feedback for interactive elements.
- Style form controls with :focus to improve accessibility.
- Use :nth-child() for striped tables and lists.
- Avoid relying only on hover effects for mobile devices.
- Keep pseudo-class styles simple and consistent.
- Use meaningful color changes to improve usability.
- Test interactive states in different browsers.
- Combine pseudo-classes with classes and IDs for more specific styling.
Web Resources on CSS Pseudo Classes
1. MDN Web Docs : Pseudo-classes
2. Web.dev : Pseudo-classes
3. CSS Tricks.com : Meet the Pseudo Class Selectors
4. Dev.to : Learn CSS Pseudo-classes by Category
🧪 Test Your CSS Code
Edit the CSS code on the left and click “Run Code” to see the result on the right.
Click “Run Code” to see the result here.