Escape syntax for CSS selectors in LESS

Question

The tilde (~) and quote method to escape CSS properties appears to work fine, however what do I do if I want a CSS selector to contain a number (or anything else I want LESS to ignore), e.g.

~"#content ul.2col" {
    float: left;
    width: 45%;
}

This just gives me a syntax error. Any ideas?

Update:

It turns out, starting a CSS indentifier (element names, classes, IDs in selectors..) with a digit or a hyphen followed by a digit is not allowed. See this question:

Which characters are valid in CSS class names/selectors?

What does `#content ul.2col` by itself do? I'm not a LESS user so I'm not too sure how it treats classes starting with numbers... (AFAIK they don't validate as standard CSS, so I'm guessing LESS takes it further in some way) — BoltClock, Nov 27 '11 at 23:56
Yes you are right, it's invalid if it starts with a number. This question http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names explains what are valid CSS selector names - and if you run the code through CSSlint.net it gives errors if the number is first. For what it's worth LESS doesn't seem to break any of the code. — William Turrell, Nov 28 '11 at 09:28

score 3 · Answer 1 · answered Nov 28 '11 at 14:17

Class selectors starting with numbers don't validate as standard CSS, as mentioned in your edit. However, I'm not sure how LESS treats invalid selectors, but you can either:

Change your class to a valid one that, say, starts with a letter; or
If you must keep the initial digit, use either one of these hacks to make it "valid":
- Use an attribute selector:
```
#content ul[class~="2col"] {
    float: left;
    width: 45%;
}
```
- Escape the digit with a backslash:
```
#content ul.\2col {
    float: left;
    width: 45%;
}
```

Escape syntax for CSS selectors in LESS

1 Answers1

Linked