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.

Possible duplicate of [wildcard \* in CSS for classes](http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes) — Laxmikant Dange, Oct 19 '15 at 08:55
the name tells me that the class `*max-height--xxl` is used for max-height, maybe you have few class named `*max-height--xl` or `*max-height--L` for indicating a setting on max-height selector? — Andrew, Oct 19 '15 at 09:01

James Donnelly · Accepted Answer · 2015-10-19T09:07:21.047

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>

Thanks for the answer! really appreciate it ! – huan feng Oct 19 '15 at 13:03 — huan feng, Oct 19 '15 at 13:03

score 5 · Answer 2 · answered Oct 19 '15 at 08:59

It doesn't mean anything special. The class name just begins with a * character.

It might be a hack designed to change the class name and, effectively, comment it out so it no longer matches a CSS selector.

var c = document.querySelector('div').classList;
var list = [];
for (var i = 0; i < c.length; i++) {
  list.push(c[i]);
};
document.body.innerHTML = list.join(" / ");

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

what does an * before a class reference mean?

2 Answers2