Universal and Grouping Selectors

Use the universal selector to match elements broadly and grouping syntax to share a rule.

* is the universal selector: it matches elements of any tag name in its context. It is often used with box-sizing in a global reset, but broad global rules deserve care.

Commas create a selector list. For example, h2, h3 matches both heading types. This reduces repeated declarations and keeps shared design decisions in one place.

The comma separates independent selectors. Without a comma, <code>h2 h3</code> means an h3 inside an h2, which is different.

Share a color without repeating a second declaration block.

HTML

<h3>Today</h3><h4>Tomorrow</h4><p>Weekly outlook</p>

CSS

h3, h4 { color: #7c3aed; }

Rendered output

Observe: Both headings change color while the paragraph stays unchanged.

Match each child inside this small box.

HTML

<section class="example-box"><h3>Team</h3><p>Two updates</p><span>New</span></section>

CSS

.example-box > * { border-bottom: 1px dashed #cbd5e1; padding: 6px; }

Rendered output

Observe: Every direct child has a divider, even though their tag names differ.

The comma separates independent selectors. Without a comma, <code>h2 h3</code> means an h3 inside an h2, which is different.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• The universal selector can affect more elements than you intend; keep broad rules purposeful.
• A comma makes a list; a space means a descendant relationship.

Group h3 and p in a single rule to give both a consistent line-height.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use grouping for shared declarations and the universal selector with a clear scope.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.