CSS class selectors not changing anything [duplicate]

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 4

.myClass {
    color: green;
}

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