in what conditions we can use css * selector? how much * selector is useful?
is it only to make css reset or hack
* { margin: 0; padding: 0; } or it has other valid useful uses? is there a ways to use * selector to optimize css using * selector?
Is it supported in all browsers?
It's mainly useful where you want to express that there's an element present, but you don't care what it is. For example:
#mything * span { color: red; } selects spans inside mything, but not spans directly inside mything.
You should be sparing about when you use * as a global match. As it could hit every one of the (potentially thousands of) elements on your page it's certainly no optimisation; in particular when it's the last thing in a selector (eg. .thing * or just * alone) it makes most browser selector engines work much harder than an simpler selector like .thing. You can get away with one * rule for resets, but using loads of them isn't a good idea.
(Personally I'm somewhat against the * { margin: 0; padding: 0; } fix. It affects way more elements than it actually needs to; the real ‘problem margin elements’ are just the list elements and <form> really. Some form controls also look wrong with the padding removed.)
* * here is a hack to get around IE6's lack of support for >, but performance isn't going to be great as the trailing *s require the browser to select every element on the page, twice, before narrowing it down. I'm loath to serve that hack to other browsers. It would seem simpler to me to put a padding-left: 115px on the callout and set the background image there instead of on the h3, which you might simply display: none instead. No extra floats or child-selectors required.It's supported in pretty much everything modern...
* is useful when you are selecting any child element. So if I want to add some margin to all elements inside an element with an id of "fudge", the selector would be:
#fudge > * { margin-left:5px; } 