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

Solution 1:

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

Solution 2:

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