Pseudo-classes are special keywords that allow you to select elements based on various criteria, including user interactions, structural properties, and form states. They are preceded by a colon (:
) in CSS. Let’s delve into some common pseudo-classes.
The :hover
pseudo-class is one of the most widely used. It allows you to apply styles when a user hovers their cursor over an element. For example:
button:hover {
background-color: #0077B6;
color: white;
}
Here, when a user hovers over a <button>
element, its background color changes to blue, and the text becomes white.
The :active
pseudo-class targets elements that are currently being activated, often when a user clicks on them. For example:
a:active {
text-decoration: underline;
}
This code underlines a link when it’s clicked, giving visual feedback to the user.
The :focus
pseudo-class is vital for web accessibility. It targets elements that receive keyboard focus, making it easier for users to navigate a page without a mouse. For example:
input:focus {
border: 2px solid #333;
}
When an <input>
element receives focus, it gains a dark gray border.
These pseudo-classes select elements that are the first or last child of their parent. They’re particularly useful for styling list items. For example:
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
font-style: italic;
}
In this code, the first item in a list becomes bold, while the last item becomes italic.
The :nth-child()
pseudo-class allows you to target elements based on their position within a parent element. You can use it to create zebra-striping in tables or target specific items. For example:
tr:nth-child(even) {
background-color: #f2f2f2;
}
This code alternates the background color of even rows in a table, improving readability.
CSS provides pseudo-classes for different link states:
:link
: Targets unvisited links.:visited
: Targets visited links.:hover
: Targets links on hover.:active
: Targets links when clicked or activated.:focus
: Targets links when they gain keyboard focus.a:link {
color: #0077B6;
}
a:visited {
color: #4B0082;
}
a:hover {
text-decoration: underline;
}
a:active {
color: #FF5733;
}
a:focus {
outline: 2px solid #333;
}
In this example, links are styled differently in various states, enhancing the user experience.
Form elements have their own set of pseudo-classes, allowing you to style them based on their states:
:enabled
: Targets enabled form elements.:disabled
: Targets disabled form elements.:checked
: Targets checked radio buttons and checkboxes.:valid
: Targets form elements with valid input.:invalid
: Targets form elements with invalid input.:required
: Targets required form elements.input:enabled {
border: 1px solid #333;
}
input:disabled {
background-color: #f2f2f2;
}
input:checked {
background-color: #0077B6;
color: white;
}
input:valid {
border-color: #00A300;
}
input:invalid {
border-color: #FF0000;
}
input:required {
background-color: #FFC0CB;
}
These pseudo-classes help style form elements for better usability and validation feedback.
The :not()
pseudo-class allows you to select elements that don’t match a specific selector. For example:
p:not(.special) {
font-size: 16px;
}
In this code, all paragraphs except those with the class “special” will have a font size of 16 pixels.
It’s important to differentiate between pseudo-elements (prefixed with ::
) and pseudo-classes (prefixed with :
). Pseudo-elements create virtual elements in the DOM, while pseudo-classes target existing elements based on state or position.
p::before {
content: "🔥 ";
}
p:first-child {
font-weight: bold;
}
In this example, ::before
creates a virtual element before each <p>
element, while :first-child
targets the first <p>
element in its parent.
CSS pseudo-classes are a dynamic toolset for elevating user experiences on the web. By understanding and using them effectively, you can create responsive and interactive designs that respond to user actions and structural contexts. Pseudo-classes enable you to craft web interfaces that are not only visually appealing but also user-friendly and accessible.