What does the * * CSS selector do?

Recently I came across * * in CSS.

Site reference - Site Link.

For a single * usage in CSS style sheet, Internet and Stack Overflow is flooded with examples, but I am not sure about using two * * symbol in CSS.

I googled it, but unable to find any relevant information about this, as a single * selects all elements, but I am not sure why the site used it twice. What is the missing part for this, and why is this hack used (if it is a hack)?

Just like any other time you put two selectors one after another (for example li a), you get the descendant combinator. So * * is any element that is a descendant of any other element — in other words, any element that isn't the root element of the whole document.

Just a little big example:

Try to add this on your site:

* { 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; }

Demo: http://jsfiddle.net/l2aelba/sFSad/

---

Example 2:

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

* * Matches everything except the top-level element, e.g., html.

* means apply given styles to all the elements.

* * means apply given styles to all the element's child elements. Example:

body > * {
  margin: 0;
}

This applies margin styles to all the child elements of body. Same way,

* * {
  margin: 0;
}

applies margin: 0 to *'s child elements. In short, it applies margin: 0 to almost every element.

Generally, one * is enough. There's no need for two * *.

That selects all elements nested inside another element in much the same way div a would select all <a> elements nested somewhere inside a <div> element.