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