Whats the difference between .some_class{} and *.some_class{}.
Does it mean that the class is applied only on tags which are inside another tag or is there no difference at all?
- 1This is incredible. First you have questions asking "what does * mean before a property" and people answering "it means a universal selector", and now you have questions asking "what does * mean before a class selector" and people saying that it's a property hack for IE.BoltClock– BoltClock2013-11-29 09:23:25 +00:00Commented Nov 29, 2013 at 9:23
Add a comment |
3 Answers
There is no difference- see here
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
*[lang=fr] and [lang=fr] are equivalent. *.warning and .warning are equivalent. *#myid and #myid are equivalent. 
6 Comments
BoltClock
What? This is not a property.
SW4
@BoltClock's a Unicorn I agree on the misleading use of terminology in the quoted article, let me replace with a better one
BoltClock
The quoted article doesn't use misleading terminology - the syntax is indeed erroneous when used with a property name. But you seem to have misinterpreted the question - it does not involve a property in the first place. It involves a selector.
SW4
@BoltClock's a Unicorn - coffee drunk, woken up + answer revised. Thanks for being on top of things keeping us wayward ones in check :S
BoltClock
I'll admit I was quite taken aback. You were not the only one who misread the question though!
|
There is no difference between them at all. If you don't specify an element type, like div or p, then whether you have * or not doesn't matter. Even if you leave it out, it's implied that you want to match any element so long as it has the class some_class. From the spec:
If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.
Examples:
*[hreflang|=en]and[hreflang|=en]are equivalent,*.warningand.warningare equivalent,*#myidand#myidare equivalent.
What you're describing in terms of elements being inside other elements only applies when * is separated from the class by a space, e.g. * .some_class. That would match an element with the class some_class only if it's inside another element (basically this means it will never match the root element).
And taking the above explanation about * being implied, this would make the selector with the space also equivalent to * *.some_class. Here you can see that two universal selectors are in use, separated by a combinator. The second one just happens to be optional because it's already qualified by the class selector (the first one is not optional because it exists on its own).
1 Comment
Jardo
Interesting thing about this is that chrome makes a difference between those two cases. I have a generated html file with generated css where all the classes are prepended with asterisk. But when I remove the asterisks, the file rendered in chrome looks completely different. I can't upload the file anywhere, but when I'll have time, I'll try to make some example. In IE 10 the file both with and without asterisks looks the same as the file without asterisks in chrome.
Assuming that before the class goes the id (#id.class):
there is not any difference between putting astherisc or not, because the asterisc means that the CSS will be applied to any id with this class, that is the same that putting the class withouth astherisc:
// This style will be applied to anybody that has the attribute class="my_class" .my_class{ } // This class will be applied to anybody to any id that also has the attribute class="my_class" *.my_class{ } Hope it helps!
