Menu
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> 
702
An asterisk ( i.e. "*" ) is used to denote a CSS universal selector. An asterisk can also be followed by a selector. This is useful when you want to set a style for of all the elements of an HTML page or for all of the elements within an element of an HTML page.
The asterisk (*), also known as the CSS universal selector, is used to select all items in an HTML file. CSS selectors are used to select the sections of your web page you wish to style.
This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.
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.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
