What does an asterisk (*) do in a CSS selector?

I found this CSS code and I ran it to see what it does and it outlined EVERY element on the page,

Can someone explain what the asterisk * does in CSS?

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>

It is a wildcard, this means it will select all elements within that portion of the DOM.

For example, if I want apply margin to every element on my entire page you can use:

* {
    margin: 10px;
}

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
    margin: 10px;
}

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

The CSS that you referenced is very useful to a web-designer for debugging page layout problems. I often drop it into the page temporarily so I can see the size of all the page elements and track down, for example, the one that has too much padding which is nudging other elements out of place.

The same trick can be done with just the first line, but the advantage of defining multiple outlines is that you get a visual clue via the border colour to the hierarchy of the nested page elements.

* acts as a wildcard, just like in most other instances.

If you do:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Then all HTML elements will have those styles.

* is a wildcard. What it means is that it will apply the style to any HTML element. Additional *'s apply the style to a corresponding level of nesting.

This selector will apply different colored outlines to all elements of a page, depending on the elements's nesting level.

in your stylesheet, usualy you need to define basic rule for all element such as font-size attribute and margins. {font-size:14px; margin:0; padding:0;} / overide browser's default setting on elements, all text font size will be rendered as 14 pixel size with zero margin and padding, including h1,...pre. */