CODEWITHSUNDEEP
csscss-selectorsless
William Turrell
William Turrell

Reputation: 3326

Escape syntax for CSS selectors in LESS

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?

Upvotes: 0

Views: 2313

Answers (1)

BoltClock
BoltClock

Reputation: 723448

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%;
}

Upvotes: 3

Related Questions