Special states of elements with interactive examples
Pseudo classes are keywords added to selectors that specify a special state of an element. They let you style elements based on user interaction, position, or other dynamic conditions.
Syntax: selector:pseudo-class { property: value; }
Applies styles when the user hovers over an element with a mouse.
a:hover { color: red; }
Specificity: 0,1,0
Example: Changes link color when hovering
Applies styles when an element receives keyboard focus or is clicked.
input:focus { border-color: blue; }
Specificity: 0,1,0
Example: Highlights input fields when active
Selects an element that is the first child of its parent.
li:first-child { font-weight: bold; }
Specificity: 0,1,1 (pseudo-class + element)
Example: Bolds the first list item
Selects elements based on their position in a parent element.
li:nth-child(2) { background: yellow; }
Specificity: 0,1,1 (pseudo-class + element)
Example: Highlights the second list item. Can use odd, even, or formulas like 2n
Applies styles when an element is being clicked.
button:active { transform: scale(0.95); }
Specificity: 0,1,0
Example: Shrinks button slightly when clicked