2

Let's say I have

<span class="1">hello</span>

And I want to declare:

span.1 { /* rules */ }

This does not seem to work (i.e. the CSS rule is not being applied.) Is there a way to get this to work? I tried just quoting the "1" in the CSS selector but that doesn't appear to be it.

gcbenison
  • 11,723
  • 4
  • 44
  • 82
  • 6
    `1` is not a valid CSS class name. See http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – Pekka May 27 '12 at 16:51

3 Answers3

8

See this: Which characters are valid in CSS class names/selectors?

a (class) name must begin with an underscore (_), a dash (-), or a letter(a–z)

Community
  • 1
  • 1
Fluidbyte
  • 5,162
  • 9
  • 47
  • 76
4

You should always name your classes and IDs with semantics in mind. What meaning does a number bring to anybody? What does it count?

To avoid this, having IDs and classes named as just integers isn't valid CSS according to W3, and thus not supported by most browsers. Always validate your HTML and CSS.

The solution is to simply give your class a more meaningful name. What are you counting? Is it comments on a blog? If so, you could just add the class comment to each of them. If you really need unique name for each, you could use comment5 instead, but that doesn't seem to make much sense as a class, in which case you should be using IDs instead.

The exact naming requirements is also described in W3C's CSS specification, section 4.1.3 Characters and case:

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

kba
  • 19,333
  • 5
  • 62
  • 89
  • I'm counting categories of characters, where each category is styled differently. The program generating the HTML simply increments a counter for each new category that is encountered. That's how I ended up with class names consisting of an integer (I see now that prepending "_" or some such is the answer.) ID's aren't really an option because there are multiple characters in each category. – gcbenison May 27 '12 at 17:15
  • Prepending `_` will not make it more semantic. Why not name them by their category? Not just a number representing the category. Or at the very least, prepend them with `category`. – kba May 27 '12 at 17:36
3

So you should check CSS Grammar

so name must begin with an underscore _ ,letter(a–z), followed by any number of dashes, underscores, letters, or numbers.

EDIT: I recommend to you read this article Valid chars in CSS class names. Colleague @Triptych gave us awesome answer.

Community
  • 1
  • 1
Simon Dorociak
  • 33,374
  • 10
  • 68
  • 106
  • Not true. An identifier cannot begin with a dash, and then be followed by one, e.g. `--foo` is not a valid class name. – kba May 27 '12 at 17:06