The asterisk (*) in CSS is a type of CSS selector known as the universal selector. It is used in CSS to select all elements on a webpage. When you apply a style using the universal selector, it will affect every element on the page.

For example, let’s say you have some HTML elements on a webpage that hold some text. Something like this:

<h1>Welcome to My Website</h1>
<p>
  This is a paragraph of text. It can contain <strong>strong</strong> and
  <em>emphasized</em> text.
</p>
<a href="https://www.example.com">Click here to visit an example website.</a>

And you wish to change the color of all the elements on this webpage to red. Here’s one way you can do it.

h1,
p,
a {
  color: red;
}

If you run the above HTML and CSS code, you will notice that the text turns red. However, imagine having about 100 lines of HTML code with various HTML tags. If you want everything to be red again, using the above method may not be efficient enough, as you would have to select each HTML tag individually (such as h1, p, a, etc.).

This is where the universal selector comes in. Using the universal selector, you can replace all the HTML tags you wish to select on the webpage with an asterisk (*). Here’s a revised version of our CSS example.

*{
  color:red;
}

Changing the CSS styles to the one above, will have the same effect as the previous CSS code. However, the asterisk is not just going to select the elements you want, it is going to select everything on the webpage including the elements you want and the ones you don’t.

When to use the * in CSS

The asterisk (*) is used mostly in CSS files to perform a CSS reset. A CSS reset is a technique used in web development to ensure that the default styles applied by different web browsers are consistent and predictable.

This is what a CSS reset looks like:

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

In this reset:

margin: 0; sets the margin of all elements to zero, removing any default spacing around elements.
padding: 0; sets the padding of all elements to zero, ensuring that elements have no extra space inside.
box-sizing: border-box; ensures that the width and height of an element include padding and border, not just the content.

If you’re finding it difficult to understand what the CSS reset does, try applying the styles to HTML elements and observe their reactions. One thing that really helped me was applying different colors to every container and border on the webpage so I could see how they all change in size and shape. For those who are more advanced, you can make use of the developer’s tools in your browser to understand what’s going on.

Another way to use the * in CSS

Remember that the asterisk (*) in CSS selects all the elements on a webpage, but there’s another way we can use it to our advantage—by limiting its scope of selection.

When used alone, the universal selector selects every element on a webpage. However, if it is used as a descendant selector, it selects every HTML element that is a descendant of a specified parent element.

For example, if we have a HTML structure like this:

<div class="container">
  <h1>Heading</h1>
  <p>This is a sample container with some text.</p>
  <p>You can add more paragraphs or any other HTML elements as needed.</p>
</div>

And we wish to select all the elements inside the div (with the class of container), here is how we can do it with the descedant selector

.container * {
}

Now, whatever style you put between those curly braces will only affect the children of that container (h1, p and p elements). No other HTML element on the webpage will be affected except the one inside the container. You can experiment by including other HTML elements inside and outside the container.