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.
* { font-size: XXX } rule and a * * { font-size: YYY } rule. One of them applies to most browsers, and the other one applies to browsers with a certain bug, although I don't have patience to figure out the details. It's similar to the * html hack that used to be in common use to detect old IE.
* html, * * will match the html element in IE6.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:
* * Matches everything except the top-level element, e.g., html.
* * is equivalent of html * ... for a HTML file. But CSS may be used to style other kind of documents (SVG notably).* 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 * *.
* * applies styles to descendant elements, not child elements. Child elements would be > as in your example, not the space. Descendant and child are not the same thing.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.
