HTML Guides for selector

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>