csslint fails to detect selectors leading with numbers.

[ehiggs]

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W\?" or "B\26 W\3F".

Therefore, csslint should flag selectors that begin with numbers as errors. However, csslint does not flag these:

$ csslint --version
v1.0.3
$ cat abc.css 
#123abc { 
    background-color: orange;
}
$ csslint abc.css 

csslint: There is 1 problem in /path/to/my/pwd/abc.css.

abc.css
1: warning at line 1, col 1
Don't use IDs in selectors.
#123abc { 

I think this is a bug.

[ehiggs]

FWIW, this was a gotcha in migrating github pages from jekyll 2.x to 3.x where posts have the form yyyy-mm-dd-title.md and post.id in templates just gave the title in 2.x. In 3.x they give the whole filename with punctuation removed. So a div could be:

<div id="{{post.id}}" class="p-{{post.id}}">
<!-- 
words words words
-->
</div>

In Jekyll 2.x this would be id="title" but in jeykyll 3.x this will be id="19700101title". The fix was to replace {{post.id}} with {{post.title}}.

[mattiacci]

The HTML5 spec states that the id attribute is allowed to start with numbers, so this may be working as intended.

[ehiggs]

CSS3 agrees with CSS2. While an ID in HTML5 might be able to begin with a number, the CSS specifications appear to say that they IDs cannot begin with numbers. This is exactly the kind of confusing discrepancy that CSS Lint sets out to solve.

[ehiggs]

The HTML 5 specification says:

The id attribute specifies its element’s unique identifier (ID).

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

An element’s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment, as a way to target an element when scripting, and as a way to style a specific element from CSS.

That's fine and the ids are correct for html. But for CSS they are still broken and CSSlint should flag ids that are likely to cause problems. For example, a{background-color:orange;} which would be a bad id to use - but valid in HTML 5.