Css number in class name

Where can a number appear in a selector?

When looking into yet another question about a class name starting with a digit that didn’t work as expected, the thought suddenly hit me that I don’t know what goes wrong. Here’s a simple example:

This doesn’t make the output blue.
And the reason is: .123 is not a valid CSS selector, because it looks like a number. Yeah, but, why? Why would a CSS parser be looking for numbers in a selector? Is there actually a reason for selectors to contain numbers? Can anybody provide an example of such a selector? Edit: As per the comments, arguments inside parentheses and brackets can be numbers; for example nth-child(2) or [colspan=2] , so my question is about numbers outside of those.

:nth-of-type(2) is an example of a selector containing a number. But the real problem here is that class names are not supposed to start with a digit.

@VilleKoo That doesn’t provide any insights into what goes wrong. I know about the workarounds; not asking about those.

@GOTO0 Yes, the rules inside parentheses and quotation marks are different; I can edit the question to that effect. But class names consisting of only digits are perfectly valid HTML.

3 Answers 3

The simplest answer is probably, that the CSS Selector Spec doesn’t allow it and (most) browsers seem to honor this, even though it was probably technically possible to allow leading numbers (or hyphens):

A very simplified explanation: A Selector consists of an (optional) type selector (e.g. # for ids, . for classes) a «nmstart» and optional «nmchar» parts. The «nmstart» part doesn’t allow numbers, while the «nmchar» part does:

As MattDiMu has already pointed out in their answer, the place to find out how selectors should be validated is within section 10 of the CSS Selectors specification: The grammar of Selectors, which itself is a clone of the CSS2.2 specification’s Grammar section with a few bits ommitted.

It’s in the CSS2.2 specification that we’re told why numbers are not valid at the start of CSS selectors:

In CSS1, a class name could start with a digit («.55ft»), unless it was a dimension («.55in»). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make «.55ft» a valid class, CSS2 requires the first digit to be escaped («.\35 5ft»)

So in short, it’s to avoid confusion. .1px is a valid unit which could easily be mistaken for a class of «1px», however we can use numbers at the start of a selector like this if we escape it. In the below example, I’m able to target the div element whose class is «1px» by escaping the 1 within the class selector (as .\31 px ):

Источник

Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]

Is it referenced anywhere that CSS classes with names start with numbers doesn’t work? for example I found that a class with background like:

doesn’t work in most browsers I have and the CSS grammar shows that but my question is there a workaround to make CSS classes with names that start with numbers valid? .

I have searched for questions that indicate selectors first character / start with but didn’t find any .. now I got there is a question answered this.

This question is not a duplicate by any means. The answer referred to doesn’t answer the number issue specifically.

2 Answers 2

There are no CSS classes. The question logically splits to two questions: can you start a class name with a digit in HTML, and (assuming the answer is “yes”, as it is) if it does, how do you use the corresponding class selector in CSS?

Various HTML specifications impose various restrictions on class names, but in browser practice, and according to HTML5, there are no limitations, except that a class name cannot contain whitespace characters. So class=000000-8 is valid.

By CSS syntax rules, a CSS identifier cannot being with an unescaped digit. Therefore, a selector like .000000-8 is invalid. But the digit can be escaped, by CSS escaping rules: the selector

is valid and matches an element with class=000000-8 .

Needless to say, class names starting with a digit are best avoided, but if you have to work with them (e.g., because some HTML documents have them and you cannot change the markup), this is the way.

Источник

CSS class starting with number is not getting applied

I’m trying to create a webpage that contains images. However, I want all the images to be the same size and in the same format. I have the following CSS class which applies to a div and centers and sizes the image:

However, my images will have different dimensions throughout the page. Thus I want to have separate classes for just height and width, like so:

the height and width don’t seem to apply. Is there anything I can do to have these classes separated?

3 Answers 3

For classes starting with numbers, you’ll need to write

You’ll probably want to avoid doing that.

The \32 represents the digit «2». The space following it is necessary to terminate the escape sequence.

The reason for this is that «CSS identifiers» may not start with numbers. In CSS, class names used in selectors are considered «CSS identifiers». Therefore, the leading number must be escaped in the way shown above. Note that there is no restriction from the HTML perspective on class names, other than they may not contain spaces. So you could write

Another very useful notation is this:

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

So you might want to consider rethinking your class names instead

Источник

How do you write a CSS selector when the class name is just an integer?

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.

3 Answers 3

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

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.

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

Источник