Pseudo-classes select elements based on state or position rather than their attributes or type. They use a colon prefix: :hover, :focus, :nth-child().
They add interactivity and structural styling without JavaScript or extra classes.
/* State-based pseudo-classes */
a:hover { color: #007bff; }
input:focus { border-color: #007bff; }
button:active { transform: scale(0.97); }
/* Structural pseudo-classes */
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f8f9fa; }Pseudo-classes add no specificity weight — :hover has the same specificity as the base selector.