CSS - What does asterisk before class mean?

css, css-selectors

Solution

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

Problem

Original source