what does an * before a class reference mean?

Question

I have code like below:

<div class="new-modal *max-height--xxl flex--0-1">

I want to know what does *max-height--xxl mean here?

This is a different question to wildcard * in CSS for classes

I want to ask the * prefix in html class reference.

Answer 1

Nothing in a global sense. In HTML5 there are no restrictions on what characters a class attribute can contain (with the exception of the space character, which is used to separate multiple classes).

For instance, the following HTML is valid:

<figure class="foo bar baz %foo *bar _baz 'foo (bar )baz"></figure>

Here foo is one class, %foo is a second unrelated class and 'foo is a third unrelated class.

The following is also valid:

<figure class="%*_'()"></figure>

The HTML5 specification states that the class attribute must be a set of space-separated tokens. It goes on to define these as:

A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.

It's worth noting that these symbols will possibly need escaping (by prefixing them with the a backslash (\) character) in order to be targeted by a CSS selector.

.\%\*\_\'\(\) {
  color: red;
}

<figure class="%*_'()">
  Hello, world!
</figure>