How to change the label color by its id with css?

Question

I wonder if there's any possible way to change the label property with css according to the string inside its tag. Example I like to change the week day with it's own color : Mon = yellow, Tue = Pink ... Sun = red.

This is the label property toggler. I wish it could have a way of mimic this.

input[type=checkbox]:checked + label {
    background:#0099cc;
    border-radius:3px;
    color: #ffffff;
    font-weight:bold;
    padding:0px 3px 0px 3px;
}

So, I expect the code to do with the label something like this:

input[type=checkbox]:checked + label[id=1] {
    background:#0099cc;
    border-radius:3px;
    color: #ffffff;
    font-weight:bold;
    padding:0px 3px 0px 3px;
}

I'm not good at css, please suggest.

Answer 1

A couple of important things to remember:

1. The + selector in CSS is called the adjacent selector. It selects only the element immediately preceded by the former element. So your label always has to follow the checkbox for it to take effect
2. In CSS, an id can not start with a number.

There are many ways you can do this, such as with an id, data attributes, or classes.

Using an id:

input[type=checkbox]:checked + label#monday {
}

Using a data selector:

input[type=checkbox]:checked + label[data-day="monday"] {
}

Using a calss:

input[type=checkbox]:checked + label.monday {
}

Answer 2

You kind of answered your own question... If the labels have an ID attribute....

input[type=checkbox]:checked + label#Monday

<label id="Monday">Monday<label>

Answer 3

Easiest way to do it is assigning an ID to each day (not like you wont need them anyway) and do the following:

#id1:checked + label {
  color: red;
}
#id2:checked + label {
  color: blue;
}
#id3:checked + label {
  color: orange;
}
#id4:checked + label {
  color: purple;
}
#id5:checked + label {
  color: green;
}

Here is a working DEMO