The universal selector * matches every element. On its own it adds nothing to specificity. In your own stylesheet, any type, class or ID rule for the same property overrides a bare *. Its two common uses are a reset at the top of a stylesheet and a rule for everything inside a container.
/* Reset all margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Target all descendants */
.container * {
font-family: Arial, sans-serif;
}
The reset zeroes the browser's default spacing and switches every box to border-box. It wins over browser defaults because author styles beat them whatever their specificity. Because * does not match pseudo-elements, resets often list *, *::before, *::after.
Use it sparingly, because it can affect performance and override styles you did not intend. It sets the value directly on each element, which beats any value that element would inherit. And .container * has the class's specificity, so it also beats type rules such as code { font-family: monospace; } inside the container.
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 ↓