*
The asterisk matches every element. Used for style resets and rules that target all the children of a chosen container.
Example
#*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}<div class="stage" style="display: grid; gap: 6px;">
<h3>Card with no default margins</h3>
<p style="color: #a1a1aa;">The heading and paragraph no longer have the spacing the browser adds by default. You decide every bit of spacing yourself, here through gap.</p>
</div>Definition and usage
#The universal selector * selects every element, regardless of tag, classes, or attributes. Used on its own, it hits the entire document, including html and body. Combined with other selectors, it narrows down to a chosen fragment: .card > * is every direct child of the card.
It has zero specificity (0, 0, 0), so it adds nothing to a selector’s weight. The rule * { margin: 0 } loses to any other rule that sets a margin. The asterisk is also implicitly present before a lone class or attribute: .lead means the same thing as *.lead.
You’ll run into it most often in a box-sizing reset and in the spacing rule nicknamed the "owl" (* + *), which adds a margin to every element preceded by a sibling. Keep in mind that * doesn’t cover pseudo-elements, which is why resets list *::before and *::after separately.
Worries about the performance of the asterisk itself are overblown these days, but heavy rules applied to every element, like * { transition: all 0.3s }, can slow down a page and trigger unwanted animations.
Syntax
#* { property: value; }Example selectors
#- Literally everything, including
htmlandbody, which is why you can see the dashed outline even around the whole preview. - Every descendant of
bodyat any depth, including thestrongin the paragraph and theliin the list. Thehtmlandbodyelements no longer match. - Only the direct children of the box: the heading, the paragraph, and the list. The
strongandlielements sit deeper. - Every child preceded by a sibling gets a top margin. The first one is left with no spacing.
Example selectors in practice
#*
html and body, which is why you can see the dashed outline even around the whole preview.* {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}body *
body at any depth, including the strong in the paragraph and the li in the list. The html and body elements no longer match.body * {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}.demo > *
strong and li elements sit deeper..demo > * {
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}.flow > * + *
.flow > * + * {
margin-top: 14px;
outline: 2px dashed #f59e0b;
outline-offset: -2px;
}More examples
#.flow > * + * {
margin-top: 12px;
}<style>:where(.flow > *) { margin: 0; }</style>
<article class="flow stage">
<h3>Module 2</h3>
<p>Every following element gets spacing from the one before it.</p>
<p>The first element has no top margin, so nothing sits away from the edge of the box.</p>
</article>The notation * + * looks like a pair of eyes, hence the playful nickname "owl". The rule works for any elements, without naming them individually.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Put the asterisk reset at the very top of the stylesheet. It has zero weight, so any later rule easily overrides it.
- Don’t apply heavy effects through
*, such as transitions, shadows, or filters. They’ll hit hundreds of elements, including ones you can’t see. - Instead of
.card *(every descendant),.card > *(just the children) is usually enough. The rule is then more predictable.
Related entries
#- Type selectorSelects every element with a given tag name, for example every p paragraph or every li list item.
- A > BThe > sign selects B elements that are direct children of element A, meaning they sit exactly one level below it.
- A + BThe + sign selects element B that sits directly after element A and shares the same parent.
- SpecificityA selector’s weight, which decides which rule wins when several rules set the same property on the same element.
- box-sizingDecides whether width and height include the padding and border.
- :where()Works like :is(), but always has zero specificity. Ideal for base styles that should be easy to override.
Spotted a mistake or missing an example? Write to us.