CSS Selectors
CSS Pseudo Classes
CSS Pseudo Classes are used to define a special state of an HTML element.
They allow you to style elements based on:
- User interaction
- Element position
- Form state
- Dynamic conditions
Pseudo classes start with a colon (:) and are widely used to create interactive and responsive user interfaces. The supporting concepts are explained in CSS Attribute Selectors and CSS Pseudo Elements.
Common examples include:
- :hover
- :focus
- :first-child
- :last-child
- :nth-child()
Syntax
CSS Pseudo Classes Syntax
css
selector:pseudo-class {
property: value;
}CSS Pseudo Classes Example
css
a:hover {
color: red;
}Changes the link color when the mouse pointer hovers over it.
Attributes
| Pseudo Class | Description | Example |
|---|---|---|
| :hover | Styles an element when hovered | a:hover |
| :focus | Styles an element when focused | input:focus |
| :first-child | Selects the first child element | p:first-child |
| :last-child | Selects the last child element | p:last-child |
| :nth-child() | Selects a specific child | li:nth-child(2) |
Match elements that are currently open
The :open pseudo-class matches elements with an open and closed state, including <details>, <dialog>, and supported picker controls. It describes the live state rather than the presence of an HTML attribute, so it remains accurate when the state changes through user interaction or browser behavior.
Focused example
css
details:open {
border-color: #2563eb;
}
dialog:open {
opacity: 1;
transform: translateY(0);
}Example
CSS Pseudo Classes Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes Example</title>
<style>
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
outline: none;
}
li:first-child {
color: green;
font-weight: bold;
}
li:last-child {
color: orange;
}
li:nth-child(2) {
color: purple;
}
</style>
</head>
<body>
<a href="#">Hover over this link</a>
<br><br>
<input type="text" placeholder="Click here">
<br><br>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| :hover | 1 | 12 | 1 | 2 |
| :open | 133 | 133 | 136 | 26.5 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Pseudo classes are dynamic and respond to user actions.
:hoveris commonly used for buttons, links, and menus.:focusimproves accessibility and form usability.:nth-child()supports formulas.
Example:
nth-child Formula Example
css
li:nth-child(odd) {
background-color: #f5f5f5;
}Styles all odd-numbered list items.
Popular Pseudo Classes
| Pseudo Class | Use Case |
|---|---|
| :hover | Mouse interaction |
| :focus | Active form field |
| :active | Clicked element |
| :first-child | First item in a group |
| :last-child | Last item in a group |
| :nth-child() | Specific item selection |
Conclusion
CSS Pseudo Classes allow you to style elements based on their state, position, or user interaction. They are essential for creating interactive, accessible, and visually engaging websites without using JavaScript.