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)?

Solution 1:

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.

Solution 2:

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/

Solution 3:

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