Pseudo-classes let CSS react to what is happening.
Direct answer
A pseudo-class starts with a single colon and selects an element in a certain state or position. Common ones are :hover, :focus, :active, :first-child, :last-child, :nth-child() and :not(). Pseudo-elements like ::before use two colons.
Examples
a:hover { color: tomato; }
input:focus { outline: 2px solid #3d5afe; }
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f5f5f5; }
button:not(:disabled):hover { background: #eee; }
p::first-line { font-weight: bold; }
.note::before { content: "Note: "; }
Accessibility tip
Never remove focus outlines without replacing them with a visible alternative. Keyboard users depend on them.
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Pseudo-classes add interactivity and structure to your styles without extra HTML.
