CSS Selectors

Pseudo-classes

A pseudo-class styles an element when it is in a special state or position. It starts with one colon.

User interaction

a:hover { color: orange; }          /* mouse over */
button:active { transform: scale(0.97); } /* being clicked */
input:focus { outline: 2px solid teal; } /* selected for typing */
a:visited { color: purple; }

Position

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
tr:nth-child(even) { background: #f4f4f4; } /* zebra stripes */
li:nth-child(3) { color: red; }

Form states

input:disabled { opacity: 0.5; }
input:checked + label { color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }

Logical

button:not(.primary) { background: white; }
.card:has(img) { padding-top: 0; }