How to change tag color by id using css?

Question

I wonder if there is any possible way to change a property labelusing css to match the line inside its tag. Example. I like to change the day of the week with its own color: Mon = yellow, Tue = Pink ... Sun = red.

This is a toggler label property. I wish I had a way to 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 something like this with the shortcut:

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 very good at css, please suggest.

Answer 1

A few important things to remember:

• + CSS . , . , .
• CSS, id .

, , , .

id:

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

:

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

calss:

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

Answer 2

... ....

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

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

Answer 3

The easiest way to do this is to assign an identifier for each day (not like you don't need it 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