in what conditions we can use css * selector?

Question

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?

Answer 1

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

Answer 2

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