The cascade decides which declaration wins when several rules set the same property on one element. It sorts them by origin and importance first, so author styles beat browser defaults, and then by cascade layer. Only then does specificity decide, and if specificity ties, the declaration that comes later in the source wins.
Specificity is a weight with three columns, compared from left to right:
- IDs, such as
#nav - classes, attributes and pseudo-classes, such as
.btn,[type="text"]and:hover - elements and pseudo-elements, such as
pand::before
The first column that differs decides. One ID beats any number of classes, so #nav a outranks a selector of eleven classes. The universal selector * and :where() add nothing.
An inline style attribute beats any selector in a normal author stylesheet. !important lifts a declaration above all normal declarations, whatever their specificity, so use it sparingly.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓