Common Pseudo-classes

A pseudo-class selects elements based on a state or position that isn't represented by a class or attribute in the HTML itself — written with a single colon :.

Interaction states:

a:hover { color: orange; }        /* mouse is over the element */
button:active { transform: scale(0.98); } /* being clicked/pressed */
input:focus { border-color: blue; }        /* has keyboard focus */
input:disabled { opacity: 0.5; }            /* disabled form control */

Structural/positional selectors, useful for styling lists and tables without adding extra classes to every item:

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
tr:nth-child(even) { background: #f9f9f9; } /* classic "zebra stripe" table */
p:nth-of-type(2) { color: gray; }
li:not(.hidden) { display: block; }

:nth-child(even) is the standard way to build alternating row colors in a table without JavaScript or manually adding a class to every other row. :not() excludes elements matching another selector — useful for styling "everything except the last item" without needing a dedicated :last-child override rule.

Form validation states (paired with the built-in HTML validation attributes covered earlier):

input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }

These let a form give instant visual feedback purely through CSS, without any JavaScript needed for basic valid/invalid styling.