The universal selector uses an asterisk (*) to match every HTML element. It can also match every descendant inside a selected scope, such as .foo *, and its specificity is 0, so other rules can override it easily. section 1.6.5 section 1.5
Use the selector for broad, shared behavior:
- Set a consistent sans-serif font across the document with * { font-family: sans-serif; }. section 1.6.5
- Apply keyboard-focus styling to every focusable element with *:focus-visible, keeping links and buttons visibly navigable. section 6.8
- Set box-sizing: border-box globally so declared dimensions include borders and padding. section 9.1
A consistent profile-card interface
A profile card can style links and buttons separately while sharing keyboard feedback through *:focus-visible { outline: dotted 1px var(--primary); outline-offset: 3px; }. The universal selector reaches both element types without requiring separate focus rules. section 6.8
View the minimal rule that applies a sans-serif font to every element. section 1.6.5
Listing 9.2 Starting CSS
* {
box-sizing: border-box;
}
body {
background: rgb(221 238 252);
margin-top: 80px;
}
View the global box-sizing rule used to make element dimensions easier to control. section 9.1
