What does an Asterisk (*) do in CSS?

Question

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>

Answer 1

* 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.

Answer 2

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.

Answer 3

"*" acts as a wildcard, just like in most other instances. If you do:

If you do:

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

Then all HTML components will have those attributes.

Answer 4

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.