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

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>

Transposal

@jasondavis - This question is specific to your code or I would just ask a new question. Does your page display multiple outlines with different colors? The only way I can produce different colors like that is if I specify a tag then * I.E. div * { outline ...} and * { outline ... }. If I use * { outline ... } and * * { outline ... } only the last css description is used. – Alli

Here's when you put this on this page! – Assume

Answer 1

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.

Ineducation

What is the advantage of using p * as opposed to just using p? – Chrysanthemum

There isn't an "advantage", it's just how you select all descendant elements inside a p tag. So if you had a span, b, strong, img, etc. inside your paragraph, it would select those and apply the styles to them. – Ineducation

Answer 2

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.

Jehoshaphat

Though these days the browser built in inspectors are much more effective, no? Or using firebug. – Eurystheus

@SoftwareMonkey - Yes, these days that's true. The build-in inspectors are great. For example, I use Chrome and do Ctrl+Shift+c then hover over an element and Chrome colours the background. Much quicker than dropping this asterisk styling into the CSS. – Jehoshaphat

Though Soviut's answer is true, this answer should have been marked as the correct answer, coz this is the exact answer for the question asked. – Lamarckism

Answer 3

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

Tried

Answer 4

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

Suffering

Answer 5

though this has been already answered,

I just wanted to put here how does it look when you put this css on (the header of) StackOverflow page..

Here is the result: I had never seen this css before

Assume

Answer 6

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

Sane