How to specify CSS class names starting with a number

Question

I have a list class to which I want to apply the top bullet - but it looks like the syntax is not valid with CSS. I don’t think he likes the section 1200mm-x-4700mm.

I cannot rename the list class as it is automatically generated. Is there any way around this so that I can apply CSS style?

<li class="max-panel-size 1200mm-x-4700mm">...</li>

li.max-panel-size.1200mm-x-4700mm {
    margin-top: 20px;
}

Answer 1

In HTML5, CSS class names can contain (and begin with) almost any character. However, in order to orient the names of stylized CSS classes inside CSS files (or JavaScript functions) , you need to avoid 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>

Run codeHide result

CSS2 [att~=val] .

Answer 2

:

[class*="1200mm-"] {
    margin-top: 20px;
}

, 1200-m

: http://jsfiddle.net/o9re6vf1/

Answer 3

CSS , , .

. .

attribute :

/* attribute selector */
[class="12px"] {
    font-size: 12px;
}

unicode :

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

/* attribute selector */
[class="12px"] {
  font-size: 12px;
}

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

<p class="12px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

Hide result

. , , IE7. , ( unicode).

Answer 4

HTML5

<li class="max-panel-size" data-margin="1200mm-x-4700mm">

li[data-margin="1200mm-x-4700mm"]{
  margin-top: 20px;
}