Grouping & Universal

Style several selectors at once and target everything.

Syntaxh1, h2, h3 { margin: 0; } * { box-sizing: border-box; }

To apply the same styles to multiple selectors, separate them with commas. This is a grouping selector.

The universal selector * matches every element. It is often used to reset default spacing.

Example

Loading editor…

Press Run to see the result.

A developer groups h1, h2, h3 selectors to share a single font-family declaration, avoiding three duplicate rules.
A designer uses the universal selector * to reset margin and padding on all elements before applying the site's layout styles.
A developer groups .header, .footer, .sidebar to apply the same background color, reducing stylesheet repetition.

Applies the same font and color declarations to four heading levels with a single grouped rule.

h1, h2, h3, h4 {
  font-family: Georgia, serif;
  color: #1a1a2e;
  line-height: 1.2;
}

Uses the * universal selector to zero out margins and padding on every element as a CSS reset foundation.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Groups multiple section class names to share padding and centering styles without repeating declarations.

.hero, .features, .pricing {
  padding: 64px 24px;
  max-width: 1200px;
  margin-inline: auto;
}