css background color of a class not working

Question

I have this code in my page :

.0 {
  background-color: blue;
}
.1 {
  background-color: red;
}

<div class="1">Ma ligne</div>
<div class="0">Ma ligne</div>
<div class="1">Ma ligne</div>
<div class="0">Ma ligne</div>
<div class="1">Ma ligne</div>
<div class="0">Ma ligne</div>
<div class="1">Ma ligne</div>

I'd like to set a background color changing if class is 0 or 1. But nothing changes. Am I missing something (obvious) ?

The CSS is loaded, other elements of the page are properly set with CSS style.

have a look at the `:nth-child(even)` and `:nth-child(odd)` pseudo-selectors. — Gabriele Petrioli, Jan 26 '16 at 20:49
@j08691, technically, that is incorrect. As of HTML5, classes (and id's) can start with pretty much anything. http://stackoverflow.com/a/31773673/3597276 ... practically, however, browsers may not be ready for this. — Michael Benjamin, Jan 26 '16 at 21:05

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

Currently, identifiers such as class names cannot start with numbers. Hopefully this will change in the future as browsers move to implement the HTML5 spec fully, but sadly this hasn't happened yet.

These rules are common in most languages, and in this case, CSS. Here's a full spec of identifier rules that are common to languages beyond HTML/CSS.

Replace each class with something like .b0, .b1, etc, and it will work.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 26 '16 at 20:48

Scott

5,001
5
43
67

As I mentioned in my comment above, this is not correct. http://stackoverflow.com/a/31773673/3597276 – Michael Benjamin Jan 26 '16 at 21:08
@Michael_B Given that no browsers actually implement this part of the spec, it doesn't help answer the question. – Scott Jan 26 '16 at 22:00
I think you could have answered the question effectively without making the absolute statement: *Identifiers such as class names cannot start with numbers.*, which is no longer true. As I mentioned in another comment, as of HTML5, `class` values can begin with numbers. However, some browsers may still be adhering to HTML4 rules. – Michael Benjamin Jan 26 '16 at 22:05

score 0 · Answer 2 · answered Jan 26 '16 at 20:52

Try this:

<div class="zero">Ma ligne</div>

        <div class="first">Ma ligne</div>

        <div class="zero">Ma ligne</div>

        <div class="first">Ma ligne</div>

        <div class="zero">Ma ligne</div>

        <div class="first">Ma ligne</div>

and CSS

.zero {
    background-color: blue;

}

.first {
    background-color: red;
}

score 0 · Answer 3 · answered Jan 27 '16 at 04:16

0

You can't declare numbers as CSS class. You can however do something like class="_1"

answered Jan 27 '16 at 04:16

Jim

397
5
17

css background color of a class not working

3 Answers3