CSS class selectors not changing anything

Question

I'm having problems with my CSS. It should set the colour of a div with a class (for a countdown), but the colour of the text isn't changing. I've tried numerous fixes, but can't get it working. Here is the relevant CSS:

.10seconds, .9seconds, .8seconds, .7seconds, .6seconds { color: #00b200 ;}
.5seconds { color: #ADFF2F ;}
.4seconds { color: #E5E500 ;}
.3seconds { color: #FFA500 ;}
.2seconds { color: #FF5719 ;}
.1seconds { color: #FF0000;}

And the relevant HTML:

<div id='timer' class='10seconds'>10</div>

#timer has no set rules in my CSS file. Full CSS here.

Thanks in advance.

CSS declaration cant start with a number, see http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors — RafH, Oct 15 '15 at 06:44
See http://stackoverflow.com/questions/27016787/how-to-target-css-class-names-that-start-with-digit — Salman A, Oct 15 '15 at 07:37

score 5 · Accepted Answer · edited May 23 '17 at 12:24

5

It's because your class names begin with number, which is not allowed in CSS. Revert the name and number, eg:

.sec5{
  color: green;
}

<div class="sec5"> 5 sec </div>

Look at this question it is well explained about CSS class names

edited May 23 '17 at 12:24

Community

1
1

answered Oct 15 '15 at 06:44

Kristijan Iliev

4,901
10
28
47

I'll try this when I have chance, thanks. – Oct 15 '15 at 07:02

score 5 · Answer 2 · edited May 23 '17 at 12:17

Technically speaking, it is not that HTML classes cannot start with a digit. Rather, it is that 10seconds is not a valid CSS identifier, which means that the CSS processor will choke on a rule such as

.10seconds { }

and ignore it. The solution, if you really want to use the 10seconds class, is to escape the leading digit:

.\31 0seconds { }

The \31 here is a the digit 1, and the escape sequence "eats" the following space.

Another alternative is to write the rule using an attribute selector:

[class~="10seconds"] { color: #00b200; }

See this question (second answer):

If you want to use a class name which is not a valid CSS identifier in querySelector, you may use the CSS.escape utility if it is available on your platform:

document.querySelector('.' + CSS.escape('10seconds'))

...most answers here are wrong. It turns out that any character except NUL is allowed as CSS class name in CSS.

Of course, as other answers suggest, you may prefer to simply use valid CSS identifiers as class names, such as seconds10, and avoid all this trouble.

score 1 · Answer 3 · edited Oct 15 '15 at 07:00

1

Problem here is you are using time parameter as a class name instead you can use below format

.seconds10, .seconds9, .seconds8, .seconds7, .seconds6 { color: #00b200 ;}
.seconds4 { color: #E5E500 ;}
.seconds3 { color: #FFA500 ;}
.seconds2 { color: #FF5719 ;}
.seconds1 { color: #FF0000;}

<div id='timer' class='seconds10'>10</div>

edited Oct 15 '15 at 07:00

answered Oct 15 '15 at 06:51

Praveen Govind

2,619
2
32
45

score 1 · Answer 4 · answered Oct 15 '15 at 06:52

1

.myClass {
    color: green;
}

<div class="myClass">This header should be GREEN to match the class selector 5 sec</div>

answered Oct 15 '15 at 06:52

CSS class selectors not changing anything

4 Answers4

Linked

Related