CSS * (asterisk) Selector | Learn CSS with W3Docs Tutorial

The * (asterisk) selector is the universal selector. It matches every element in the document, regardless of its type, id, or class.

You usually reach for * in two situations: to apply a base style to everything on the page (a "reset"), or to target every descendant inside a specific container by combining * with another selector.

This chapter covers the syntax, two runnable examples, how * interacts with specificity, and the performance caveat you should know before using it.

Syntax

* {
  /* css declarations */
}

Used on its own, * selects every element. Combined with another selector and a space (a descendant combinator), it selects every element inside that target:

/* every element inside any <div> */
div * {
  /* css declarations */
}

Specificity

The universal selector has a specificity of zero — (0, 0, 0). It does not add any weight to a rule. That means almost any other selector (a tag name, a class, an id) will override a declaration coming from *, which is exactly why it works well for setting defaults that more specific rules can then refine.

Example: select every element

The rule below paints the background of every element on the page, including <html>, <body>, headings, and paragraphs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>* selector example</h2>
    <div class="example">
      <p id="example1">Lorem ipsum is simply dummy text...</p>
      <p id="example2">Lorem ipsum is simply dummy text...</p>
    </div>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

Example: select every element inside a `<div>`

Here div * targets only the elements nested inside a <div>. The standalone <p> after the <div> keeps its default background, while the <p> and <span> inside the <div> are styled:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div * {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>* selector example</h2>
    <div class="example">
      <p id="example1">Lorem ipsum is simply dummy text...</p>
      <span id="example2">Lorem ipsum is simply dummy text...</span>
    </div>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Try it Yourself »

A common use: a box-sizing reset

The most popular real-world use of * is normalizing the box model so that padding and borders no longer expand an element's width. This snippet is in countless stylesheets:

*,
*::before,
*::after {
  box-sizing: border-box;
}

See box-sizing for what border-box changes.

Performance and good practice

Use it sparingly in nested selectors. A rule like * alone is cheap, but combining it inside long descendant chains (for example .nav ul li *) forces the browser to evaluate more elements. For a single reset rule this is negligible; avoid it in deeply nested, frequently-matched selectors.
Prefer it for resets, not for theming. Because its specificity is 0, * is ideal for baseline defaults but a poor choice when you need a rule to win against other styles.
It matches pseudo-elements only when you ask. * matches elements; *::before and *::after are needed to also cover generated content, as in the reset above.

CSS Selectors overview — the full list of selector types.
Id and class selectors — target specific elements.
:first-child — a structural pseudo-class.

Practice

What are the types of CSS selectors mentioned on the specified URL?