CSS style exceptions within a span?

Question

I have a DIV with check boxes and labels defined by CSS style when checked:

#project input:checked + label {background-color:#787878;color:white;}

I want to make two buttons with exceptions to color:white.

Checkbox ID="B" label background-color to turn red and Checkbox ID="C" label background-color to turn blue. I can't figure it out how to add that specificity.

Thanks in advance.

EDIT: (adding HTML code)

<input type="checkbox" id="B" value="B" style="display:none;" onclick="document.getElementById('B').style.color = 'red'"><label for="B"> checkbox B </label>

This is my failed attempt with a line level change. I only posted CSS because I thought this could be done in the style.

Answer 1

Is this what you are looking for input[id="test"]:checked this styles inputs with specific id's and checked state.

And you cant style the background-color in a checkbox as far as i know.

Answer 2

You don't need the Javascript. Also add #B, #C { display: none; } #B, #C { display: none; } if needed.

 #B:checked + label { background: red; color: white; } #C:checked + label { background: blue; color: white; } 

 <input type="checkbox" id="B" /> <label for="B">test</label> <input type="checkbox" id="C" /> <label for="C">test</label>