CSS: In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make X a valid class, CSS2 requires the first digit to be escaped: Y.

A class selector in the CSS starts with a digit, and CSS reads a dot followed by a digit as a number, so the selector is invalid.

HTML allows a class name to start with a digit, so class="3cols" is fine in the markup. CSS selectors are stricter. Since CSS2, the tokenizer reads .3cols the same way it reads .5em: the number .3 followed by a unit called cols. That isn't a valid selector, so the browser drops the whole rule, along with any other selectors listed with it, and none of its declarations apply.

The simplest fix is to rename the class so it starts with a letter, in both the CSS and the HTML. If you can't rename it, escape the first digit in the selector. The escape is a backslash followed by the digit's hexadecimal code point (\30 for 0 up to \39 for 9), and the validator's message shows the escaped selector to use. When the character after the escape is a hex digit (0-9 or a-f), add a space to end the escape: .\33 cols selects 3cols, but .\33cols reads \33c as one escape. Selectors in JavaScript follow the same rules, and CSS.escape() produces the escaped form.

Invalid example

<style>
  .3cols {
    float: right;
  }
</style>

Valid example

<style>
  .cols-3 {
    float: right;
  }

  .\33 cols {
    float: right;
  }
</style>

Learn more:

MDN Reference

MDN Web Docs: Class selectors

→

MDN Reference

MDN Web Docs: CSS.escape()

→