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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-to-make-x-a-valid-class-css2-requires-the-first-digit-to-be-escaped
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Valid example

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

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