Selectors, specificity and the cascade

The common selectors

Pseudo-classes and pseudo-elements

A pseudo-class selects an element in a certain state or position: a:hover (mouse over it), button:focus-visible (keyboard focus), li:first-child, tr:nth-child(even) for striped tables. A pseudo-element styles a part of an element: p::first-line, input::placeholder, or ::before to add decoration.

.btn:hover { background: #1e40af; }
.btn:focus-visible { outline: 3px solid #f59e0b; }
tr:nth-child(even) { background: #f3f4f6; }
.required::after { content: " *"; color: #b91c1c; }

The cascade: who wins?

Often two rules set the same property on the same element. The cascade is the set of rules the browser uses to choose. In simple terms: first importance (!important), then specificity, then order (the later rule wins).

Specificity in simple counting

Count the selector as three numbers: ids, then classes/attributes/pseudo-classes, then types/pseudo-elements. Compare from the left. #cart (1,0,0) beats .menu .item (0,2,0), which beats nav ul li (0,0,3).

p { color: black; }            /* 0,0,1 */
.note { color: blue; }         /* 0,1,0  wins over p */
#intro { color: green; }       /* 1,0,0  wins over .note */
.note { color: purple; }       /* same as first .note, but later: wins over it */

Inheritance

Some properties, mostly about text (color, font-family, font-size, line-height), pass down from a parent to its children. That is inheritance. Set font-family once on body and the whole page uses it. Box properties such as margin, border and padding do not inherit.