Universal Selectors and Selector Lists CSS Tutorial

Introduction

CSS selectors tell the browser which HTML elements to style.

Some selectors are very specific.

For example:

1.card {2  padding: 24px;3}

This targets elements with class="card".

Other selectors are much broader.

For example:

1* {2  box-sizing: border-box;3}

The * selector is called the universal selector.

It can target every element.

CSS also lets you group selectors together in a selector list:

1h1,2h2,3h3 {4  line-height: 1.2;5}

This applies the same declarations to more than one selector.

Universal selectors and selector lists are useful, but they should be used carefully.

Broad selectors can affect more elements than you expect.

Grouped selectors can save repetition, but they can also make mistakes spread across several elements at once.

This article explains how to use *, grouped selectors, and broad targeting in CSS.

What Is the Universal Selector?

The universal selector is written as an asterisk:

1*

It means “select everything”.

For example:

1* {2  box-sizing: border-box;3}

This rule applies to every element on the page.

It can apply to headings, paragraphs, links, images, buttons, forms, sections, divs, spans, lists, tables, and more.

The universal selector is powerful because it is very broad.

That also means it can cause problems if you use it carelessly.

A Simple Universal Selector Example

HTML:

1<h1>Welcome</h1>2 3<p>This is a paragraph.</p>4 5<a href=”about.html”>About us</a>

CSS:

1* {2  color: blue;3}

This makes the heading, paragraph, and link text blue.

The rule does not only affect one type of element.

It affects every element that can use the color property.

This is why the universal selector should usually be used for simple global rules, not detailed visual styling.

Why the Universal Selector Is Powerful

The universal selector can affect the whole document with one rule.

For example:

1* {2  margin: 0;3}

This removes margin from every element.

That includes:

1body2headings3paragraphs4lists5forms6tables7figures8blockquotes9sections10articles

This may be useful in a reset stylesheet, but it can also remove helpful default spacing.

A page with all margins removed may look cramped unless you add spacing back yourself.

Common Use: box-sizing: border-box

One of the most common uses of the universal selector is setting box-sizing.

Example:

1*,2*::before,3*::after {4  box-sizing: border-box;5}

This applies box-sizing: border-box to all elements and their pseudo-elements.

This rule is popular because it makes sizing more predictable.

With border-box, an element’s declared width includes its content, padding, and border.

For example:

1.card {2  width: 300px;3  padding: 20px;4  border: 2px solid #cccccc;5}

With box-sizing: border-box, the visible width stays at 300px.

Without it, the padding and border are added on top of the content width, making the element wider than 300px.

Why box-sizing Is a Good Universal Rule

The box-sizing rule is a good use of broad targeting because it creates a predictable layout foundation.

It does not force every element to have the same colour, size, margin, or font.

It simply changes how widths and heights are calculated.

That makes layouts easier to manage.

A common base rule is:

1*,2*::before,3*::after {4  box-sizing: border-box;5}

This is a practical and controlled use of the universal selector.

Universal Selector with Resets

The universal selector is sometimes used in CSS resets.

For example:

1* {2  margin: 0;3  padding: 0;4}

This removes default margin and padding from every element.

It creates a blanker starting point.

However, it also removes useful default spacing from elements such as:

1headings2paragraphs3lists4blockquotes5fieldsets6figures

If you use this kind of reset, you should add your own spacing back.

For example:

1p {2  margin-bottom: 1rem;3}4 5section {6  margin-bottom: 3rem;7}

A reset should be followed by deliberate styling.

Universal Selector with Inherited Fonts

Another broad rule sometimes used in base CSS is:

1button,2input,3select,4textarea {5  font: inherit;6}

This is not the universal selector, but it is a broad grouped rule.

It makes form controls inherit the page font.

You might be tempted to write:

1* {2  font: inherit;3}

This is usually too broad.

It may affect elements in ways you do not intend.

A more targeted selector list is better:

1button,2input,3select,4textarea {5  font: inherit;6}

This targets only the form controls that commonly need font normalisation.

Be Careful with * { color: ... }

This rule is very broad:

1* {2  color: navy;3}

It applies to every element that can inherit or use the color property.

A better approach is usually to set text colour on the body:

1body {2  color: navy;3}

Many text elements inherit colour from the body.

This is usually cleaner and less forceful than applying color to every element directly.

Use inheritance when it makes sense.

Do not use the universal selector when a parent element can provide the same result more cleanly.

Be Careful with * { margin: 0; }

This rule removes all default margins:

1* {2  margin: 0;3}

It can be useful in some reset systems, but it can also make content harder to read.

For example, this HTML normally has readable spacing:

1<h1>Article Title</h1>2 3<p>First paragraph.</p>4 5<p>Second paragraph.</p>

After removing all margins, the heading and paragraphs may sit too close together.

A more controlled approach is:

1body {2  margin: 0;3}4 5p {6  margin-top: 0;7  margin-bottom: 1rem;8}9 10h1 {11  margin-top: 0;12  margin-bottom: 1.5rem;13}

This removes the page edge margin but keeps readable content spacing.

Universal Selector Inside Another Selector

The universal selector can also be used inside another selector.

Example:

1.card * {2  margin-top: 0;3}

This selects every element inside .card.

HTML:

1<article class=”card”>2  <h2>Card Title</h2>3  <p>Card text.</p>4  <a href=”lesson.html”>Read more</a>5</article>

The selector .card * targets the heading, paragraph, and link inside the card.

This can be useful, but it is still broad.

It affects every descendant inside .card, not just direct children.

Descendants vs Direct Children

This selector targets all descendants inside .card:

1.card * {2  margin-top: 0;3}

That means it can target elements nested deeply inside the card.

This selector targets only direct children:

1.card > * {2  margin-top: 0;3}

HTML:

1<article class=”card”>2  <h2>Card Title</h2>3  <div>4    <p>Nested paragraph.</p>5  </div>6</article>

In this example, .card > * targets the <h2> and the <div> because they are direct children of .card.

It does not directly target the nested <p>.

The > symbol means direct child.

This can make broad targeting more controlled.

Useful Pattern: Spacing Direct Children

A common layout pattern is to add spacing between direct children.

Example:

1.stack > * + * {2  margin-top: 1rem;3}

This may look complex, but it has a useful meaning.

It selects every direct child inside .stack that has another direct child before it.

HTML:

1<div class=”stack”>2  <h2>Title</h2>3  <p>First paragraph.</p>4  <p>Second paragraph.</p>5</div>

The first child does not get top margin.

The following children do.

This creates consistent spacing between items.

This is a more careful use of broad targeting.

What Is a Selector List?

A selector list lets you apply the same declarations to more than one selector.

For example:

1h1,2h2,3h3 {4  line-height: 1.2;5}

This applies the same line-height to all <h1>, <h2>, and <h3> elements.

The selectors are separated by commas.

A selector list helps avoid repeating the same declarations.

Instead of writing:

1h1 {2  line-height: 1.2;3}4 5h2 {6  line-height: 1.2;7}8 9h3 {10  line-height: 1.2;11}

you can write:

1h1,2h2,3h3 {4  line-height: 1.2;5}

This is shorter and easier to maintain.

Selector List Syntax

A selector list uses commas between selectors.

Example:

1h1,2h2,3h3 {4  color: navy;5}

Each selector is part of the same rule.

The declaration block applies to all of them.

Correct:

1h1,2h2,3h3 {4  margin-top: 0;5}

Incorrect:

1h12h23h3 {4  margin-top: 0;5}

Without commas, CSS reads the selector differently.

Commas are required when grouping separate selectors.

Grouping Type Selectors

You can group type selectors.

Example:

1h1,2h2,3h3,4p {5  margin-top: 0;6}

This removes the top margin from headings and paragraphs.

Another example:

1button,2input,3select,4textarea {5  font: inherit;6}

This applies the same font inheritance rule to several form controls.

Selector lists are useful when several element types need the same base style.

Grouping Class Selectors

You can group class selectors too.

Example:

1.alert,2.notice,3.message {4  padding: 16px;5  border-radius: 6px;6}

This applies the same padding and border radius to elements with any of these classes.

HTML:

1<p class=”alert”>Important alert.</p>2<p class=”notice”>Useful notice.</p>3<p class=”message”>General message.</p>

All three elements receive the grouped styles.

You can then add separate styles for each type:

1.alert {2  border: 1px solid red;3}4 5.notice {6  border: 1px solid orange;7}8 9.message {10  border: 1px solid blue;11}

This avoids repeating the shared styles.

Grouping Mixed Selectors

A selector list can include different selector types.

Example:

1h1,2.page-title,3#main-heading {4  line-height: 1.2;5}

This rule applies to:

1all h1 elements2elements with class=”page-title”3the element with id=”main-heading”

This is valid CSS.

However, mixed selector lists should be used carefully.

If selectors are too different in purpose, grouping them can make the stylesheet harder to understand.

Group selectors when they genuinely share the same styling reason.

Selector Lists Save Repetition

Without a selector list, you may repeat the same declarations:

1h1 {2  font-family: Arial, sans-serif;3}4 5h2 {6  font-family: Arial, sans-serif;7}8 9h3 {10  font-family: Arial, sans-serif;11}

With a selector list:

1h1,2h2,3h3 {4  font-family: Arial, sans-serif;5}

This is easier to maintain.

If you later change the font, you only change it once.

Selector lists are useful when the same style should apply to several selectors.

Group Only Shared Styles

A selector list should group styles that are genuinely shared.

Good:

1h1,2h2,3h3 {4  line-height: 1.2;5}

This makes sense because headings commonly share a tighter line height.

Less clear:

1h1,2button,3.card,4footer {5  margin-bottom: 20px;6}

This groups unrelated elements.

It may work, but it is harder to understand.

If one selector needs to change later, the group may become awkward.

Only group selectors when the shared rule has a clear purpose.

Selector Lists and Mistakes

Be careful when writing selector lists.

This CSS is correct:

1h1,2h2,3h3 {4  color: navy;5}

This CSS is different:

1h1 h2 h3 {2  color: navy;3}

The second selector does not mean “h1, h2, and h3”.

It means an <h3> inside an <h2> inside an <h1>.

That is probably not what you want.

Use commas to group separate selectors.

Selector Lists and Invalid Selectors

In many cases, if one selector in a selector list is invalid, the whole selector list can fail.

For example:

1h1,2.invalid??,3h2 {4  color: navy;5}

The invalid selector can cause the browser to ignore the whole rule.

A safer approach is to avoid experimental or uncertain selectors inside large selector lists unless you know how they behave.

Keep selector lists clear and valid.

Broad Targeting

Broad targeting means writing selectors that affect many elements.

Examples:

1* {2  box-sizing: border-box;3}

1p {2  margin-bottom: 1rem;3}

1h1,2h2,3h3,4h4,5h5,6h6 {7  line-height: 1.2;8}

Broad targeting is not bad by itself.

It is useful for base styles.

However, broad targeting should be deliberate.

Do not use broad selectors when you only want to style one component.

Good Broad Targeting

Good broad targeting creates a sensible foundation.

Examples:

1*,2*::before,3*::after {4  box-sizing: border-box;5}

1body {2  margin: 0;3  font-family: Arial, sans-serif;4  line-height: 1.6;5}

1img {2  max-width: 100%;3  height: auto;4}

1button,2input,3select,4textarea {5  font: inherit;6}

These rules create a useful base for the whole page.

They are broad, but they have a clear purpose.

Risky Broad Targeting

Some broad targeting can cause unwanted effects.

Example:

1* {2  border: 1px solid red;3}

This adds a border to everything.

It might be useful temporarily for debugging, but it is not suitable as normal styling.

Another example:

1div {2  padding: 20px;3}

This affects every <div> on the page.

Since <div> is often used as a generic container, this can create unexpected spacing throughout the layout.

A class would usually be better:

1.container {2  padding: 20px;3}

Do Not Use * for Everything

The universal selector should not replace thoughtful selectors.

Less suitable:

1* {2  font-size: 18px;3  color: navy;4  margin-bottom: 16px;5}

This affects far too much.

It may change icons, buttons, form controls, layout elements, and nested components unexpectedly.

Better:

1body {2  font-size: 18px;3  color: navy;4}5 6p {7  margin-bottom: 16px;8}

Use inheritance and targeted selectors where possible.

Universal Selector and Performance

In modern browsers, simple use of the universal selector is usually not a major performance problem for normal websites.

The bigger concern is usually maintainability.

A rule like this:

1* {2  margin: 0;3}

may be easy to write, but it can make layout and spacing harder to manage if you are not careful.

The question is not only “Can the browser handle this?”

The better question is:

1Is this selector clear?2Is it necessary?3Will it affect elements I did not intend to target?4Will I need to undo it later?

Write broad selectors only when the broad effect is intentional.

Universal Selector and Specificity

The universal selector has very low specificity.

For example:

1* {2  color: blue;3}4 5p {6  color: black;7}

The paragraph will usually be black because the type selector p is more specific than *.

Another example:

1* {2  box-sizing: content-box;3}4 5.card {6  box-sizing: border-box;7}

Elements with class="card" use border-box because .card is more specific.

This low specificity is one reason the universal selector can be useful for base styles.

It is usually easy to override.

Selector Lists and Specificity

Each selector in a selector list keeps its own specificity.

Example:

1h1,2.page-title,3#main-title {4  color: navy;5}

The h1 selector has type selector specificity.

The .page-title selector has class selector specificity.

The #main-title selector has ID selector specificity.

They share the same declaration block, but each selector still matches elements according to its own specificity.

This matters when other CSS rules compete with them.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Universal Selector and Selector List Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1>CSS Selector Examples</h1>12 13    <p class=”intro”>14      This page uses a universal selector, grouped selectors, and careful broad targeting.15    </p>16 17    <section class=”card”>18      <h2>Universal Selector</h2>19      <p>The universal selector can apply a rule to every element.</p>20    </section>21 22    <section class=”card”>23      <h2>Selector Lists</h2>24      <p>Selector lists let several selectors share the same declarations.</p>25    </section>26 27    <form>28      <label for=”email”>Email address</label>29      <input type=”email” id=”email” name=”email”>30      <button type=”submit”>Subscribe</button>31    </form>32  </main>33 34</body>35</html>

CSS:

1/* Universal selector for predictable sizing */2*,3*::before,4*::after {5  box-sizing: border-box;6}7 8/* Page defaults */9body {10  margin: 0;11  font-family: Arial, sans-serif;12  line-height: 1.6;13  color: #222222;14}15 16/* Selector list for shared heading styles */17h1,18h2 {19  line-height: 1.2;20  margin-top: 0;21}22 23/* Selector list for form controls */24button,25input,26select,27textarea {28  font: inherit;29}30 31/* Broad but controlled image rule */32img {33  max-width: 100%;34  height: auto;35}36 37/* Layout */38.container {39  width: 90%;40  max-width: 900px;41  margin: 0 auto;42  padding: 40px 0;43}44 45/* Component */46.card {47  padding: 24px;48  border: 1px solid #dddddd;49  margin-bottom: 24px;50}

This example uses broad selectors for base styles and classes for component styling.

That balance keeps the CSS predictable.

How the Complete Example Works

This rule applies to all elements and pseudo-elements:

1*,2*::before,3*::after {4  box-sizing: border-box;5}

This creates predictable sizing.

This selector list applies shared heading styles:

1h1,2h2 {3  line-height: 1.2;4  margin-top: 0;5}

This selector list applies font inheritance to form controls:

1button,2input,3select,4textarea {5  font: inherit;6}

The .card class is used for repeated card styling:

1.card {2  padding: 24px;3  border: 1px solid #dddddd;4  margin-bottom: 24px;5}

The broad rules create a foundation.

The class rules style specific components.

Common Mistake: Using * Instead of body

Less suitable:

1* {2  font-family: Arial, sans-serif;3  color: #222222;4}

Better:

1body {2  font-family: Arial, sans-serif;3  color: #222222;4}

Many elements inherit font and colour from the body.

Using body is usually cleaner than forcing those styles onto every element.

Common Mistake: Removing All Spacing Without Replacing It

Less useful:

1* {2  margin: 0;3  padding: 0;4}

This removes useful default spacing from everything.

Better:

1body {2  margin: 0;3}4 5p {6  margin-top: 0;7  margin-bottom: 1rem;8}9 10h1,11h2 {12  margin-top: 0;13  margin-bottom: 1rem;14}

This gives you control without making the page cramped.

Common Mistake: Forgetting Commas in Selector Lists

Incorrect:

1h1 h2 h3 {2  color: navy;3}

Correct:

1h1,2h2,3h3 {4  color: navy;5}

Without commas, the selector means something completely different.

Use commas when grouping separate selectors.

Common Mistake: Grouping Unrelated Selectors

Less clear:

1h1,2button,3.footer,4.card img {5  margin-bottom: 20px;6}

This group mixes unrelated elements and purposes.

Better:

1h1 {2  margin-bottom: 20px;3}4 5button {6  margin-bottom: 20px;7}8 9.footer {10  margin-bottom: 20px;11}12 13.card img {14  margin-bottom: 20px;15}

Or better still, organise the spacing based on layout or component needs.

Grouping is useful only when the shared rule is genuinely meaningful.

Common Mistake: Broadly Styling All div Elements

Less suitable:

1div {2  padding: 20px;3}

This targets every <div> on the page.

Since <div> is often used for many different purposes, this can cause unexpected layout problems.

Better:

1.container {2  padding: 20px;3}

or:

1.card {2  padding: 20px;3}

Use classes when the style belongs to a specific layout or component.

Common Mistake: Using Universal Selector for Debugging and Forgetting to Remove It

A debugging rule might look like this:

1* {2  outline: 1px solid red;3}

This can help you see element boundaries.

However, it should usually be removed before publishing.

If you keep it, every element may show red outlines.

Debugging rules are useful temporarily, but they should not be left in production CSS unless intended.

Best Practices

Use the universal selector sparingly.

Use * for simple base rules such as box-sizing.

Avoid using * for detailed visual styling.

Use body for inherited global font and colour styles.

Use selector lists to reduce repeated declarations.

Separate selectors in a selector list with commas.

Group selectors only when they genuinely share the same styling purpose.

Avoid grouping unrelated selectors just because they currently share one value.

Be careful with broad rules such as div, section, or *.

Use classes for components and reusable styling.

Use direct-child patterns such as .container > * when broad targeting needs boundaries.

Inspect elements in browser developer tools if a broad selector causes unexpected styling.

Summary

The universal selector is written as:

1*

It selects every element.

A common useful example is:

1*,2*::before,3*::after {4  box-sizing: border-box;5}

Selector lists let several selectors share one declaration block:

1h1,2h2,3h3 {4  line-height: 1.2;5}

The comma is important.

Without commas, the selector means something else.

Universal selectors and selector lists are useful for base styles, resets, shared typography, form control normalisation, and reducing repetition.

However, broad targeting should be deliberate.

The main idea is simple:

1Use broad selectors for broad foundations.2Use specific selectors for specific components.

When you use *, grouped selectors, and broad targeting carefully, your CSS becomes cleaner, more consistent, and easier to maintain.