How to Target CSS Class Names That Start with Digit

How to target CSS class names that start with digit

In HTML5, CSS class names can contain (and start with) just about any character. However, in order to target fancy CSS class names inside CSS files (or JavaScript functions) you need to escape them.

li.max-panel-size.\31 200mm-x-4700mm {  background: #F00;}li.max-panel-size.\31 111mm-x-1111mm {  background: #0F0;}li.max-panel-size.\39 999mm-x-9999mm {  background: #00F;}

<ul>  <li class="max-panel-size 1200mm-x-4700mm">Test 1</li>  <li class="max-panel-size 1111mm-x-1111mm">Test 2</li>  <li class="max-panel-size 9999mm-x-9999mm">Test 3</li></ul>

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

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

.\30 00000-8

or, equivalently,

.\00003000000-8 

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 target class names starting with before a certain character

You can use partial selector * like this:

[class*="col"]{  height: 50px;  background: #333;}.one-col {  background: blue;}.two-col {  background: red;}

<div class="asas-col-asadas"></div><div class="one-col"></div><div class="two-col"></div>

Which characters are valid in CSS class names/selectors?

You can check directly at the CSS grammar.

Basically¹, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must² be a letter or underscore, and the name must be at least 2 characters long.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In short, the previous rule translates to the following, extracted from the W3C spec.:

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, 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".

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

Set style to class names that have a random number

You can use attribute selectors providing the start and end text is always the same and only the random number changes.

  [class^="pin_"][class$="_btn_select"]

The first selector choses any class that starts with the required text where the second selects classes that end with the chosen text. If we make them a single selector then.....

div {  padding: 1em;  margin: 1em auto;  background: red;  text-align: center;}
[class^="pin_"][class$="_btn_select"] {  background: green;}
[class$="_btn_select"] {  background: yellow;}

<div class="pin_12345_btn_select">Should work</div><div class="12345_btn_select">Wont Work Fully</div><div class="pin_12345">Definitely won't work</div><div class="pin_random_btn_select">Should work</div>

CSS class starting with number is not getting applied

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

.\32 00-200 {
  width: 200px;
  height: 200px;
}

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 <div class="%^*+lt;", as long as you were willing to figure out how to write that in escaped form in your CSS file.

See the question suggested as a duplicate for more information.

---

Related Topics