css - pseudo-classes
CSS pseudo-classes are special selectors that target elements based on their state, position, or user interactions. They are powerful tools for enhancing the design and user experience of your website without adding additional JavaScript.
This guide covers:
What are CSS Pseudo-classes?
Commonly Used Pseudo-classes
:hover
:active
:focus
:visited
:first-child
:last-child
:nth-child()
:not()
:checked
:disabled
Using Pseudo-classes with Examples
1. What are CSS Pseudo-classes?
Pseudo-classes are keywords added to selectors to specify a special state of the selected elements. They are written using a colon (:) followed by the pseudo-class name.
Example Syntax
selector:pseudo-class {
property: value;
}
2. Commonly Used Pseudo-classes
2.1 :hover
The :hover pseudo-class is used to apply styles when the user hovers over an element with the mouse.
button:hover {
background-color: #007bff;
color: white;
}
Use Case: Highlight buttons or links when hovered.
2.2 :active
The :active pseudo-class targets an element that is currently being clicked.
button:active {
transform: scale(0.95);
}
Use Case: Provide feedback for button presses.
2.3 :focus
The:focus pseudo-class applies styles when an element is focused, such as when a user clicks on a text input field.
input:focus {
outline: 2px solid #007bff;
}
Use Case: Highlight form fields when selected.
2.4 :visited
The :visited pseudo-class styles links that have already been clicked.
a:visited {
color: purple;
}
Use Case: Indicate links that the user has already explored.
2.5 :first-child
The :first-child pseudo-class selects the first child element within its parent.
p:first-child {
font-weight: bold;
}
Use Case: Style the first paragraph differently.
2.6 :last-child
The :last-child pseudo-class targets the last child of a parent element.
p:last-child {
margin-bottom: 0;
}
Use Case: Remove bottom margin for the last paragraph.
2.7 :nth-child()
The :nth-child() pseudo-class selects elements based on their position in a list.
li:nth-child(odd) {
background-color: #f0f0f0;
}
Use Case: Style alternating rows or list items.
2.8 :not()
The :not() pseudo-class selects elements that do not match a specified selector.
input:not([type="submit"]) {
border: 1px solid #ccc;
}
Use Case: Exclude specific elements from styling.
2.9 :checked
The :checked pseudo-class applies to radio buttons or checkboxes that are checked.
input[type="checkbox"]:checked + label {
text-decoration: line-through;
}
Use Case: Change the appearance of labels when checkboxes are checked.
2.10 :disabled
The :disabled pseudo-class targets form elements that are disabled.
input:disabled {
background-color: #e9ecef;
cursor: not-allowed;
}
Use Case: Style disabled input fields differently.
3. Using Pseudo-classes with Examples
Example: Styling a Navigation Menu
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS code:
/* Apply styles to all links */
.nav a {
text-decoration: none;
padding: 10px;
display: inline-block;
color: #333;
transition: background-color 0.3s;
}
/* Change background color on hover */
.nav a:hover {
background-color: #007bff;
color: white;
}
/* Style the first link differently */
.nav a:first-child {
font-weight: bold;
}
/* Style the last link */
.nav a:last-child {
border-right: none;
}
/* Highlight visited links */
.nav a:visited {
color: #6c757d;
}
Example: Form Styling with Focus and Disabled States
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Login" disabled>
</form>
CSS code:
input {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
/* Focus effect */
input:focus {
border-color: #007bff;
outline: none;
}
/* Disabled submit button */
input[type="submit"]:disabled {
background-color: #e9ecef;
color: #6c757d;
}
