in what conditions we can use css * selector?

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?

From stackoverflow metal-gear-solid

• 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; }

  Tatu Ulmanen : The asterisk selector *does* work in IE6.

  bobince : It is of course the `>` child selector that doesn't.

  Dave Markle : sigh... IE6 kills me.

  bobince : Never mind, it'll be gone in [checks watch] oh, 2026. Joy!
  From Dave Markle

• 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.)

  metal-gear-solid : but we can define css for form elements after reset

  Felipe Alsacreations : Here is an example where it's useful : http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/ (second example: left margin on every child, no left margin on '* *' to avoid doubled margins).

  bobince : `* *` 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.
  From bobince