Definition
CSS pseudo-classes are selectors that target elements based on their state or interaction (like hovering) or their structural position within the document tree, without adding extra HTML classes.
Why It Matters
Pseudo-classes provide the ability to style elements dynamically based on user interaction. They are essential for creating responsive and accessible user interfaces without bloated JavaScript or markup.
Core Concepts
- Interaction States:
:hover,:active,:focusstyle elements as users interact with them. - Link States:
:link(unvisited),:visitedformat hyperlink history. - Structural Pseudo-classes:
:first-child,:last-child,:nth-child(n)target elements based on their position among siblings. - Form States:
:checked,:disabledtarget specific states of form inputs.
a:hover {
color: #ff6600;
text-decoration: underline;
}
li:nth-child(even) {
background-color: #f2f2f2;
}
input:focus {
border: 2px solid blue;
}