CODEWITHSUNDEEP
csscss-selectors
Jardo
Jardo

Reputation: 2093

CSS - What does asterisk before class mean?

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?

Upvotes: 3

Views: 3820

Answers (3)

SW4
SW4

Reputation: 71170

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.

Upvotes: 4

Rafa Romero
Rafa Romero

Reputation: 2716

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!

Upvotes: 0

BoltClock
BoltClock

Reputation: 723749

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,
  • *.warning and .warning are equivalent,
  • *#myid and #myid are 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).

Upvotes: 3

Related Questions