check checkbox, highlight label

[mlotfi]

Hi,

I have this jsfiddle http://jsfiddle.net/mlotfi/f8t1uysa/ that that two checkboxes, when checking the first one its label get highlithed, but the second checkbox does not have any effect.
please your help is appreciated.
Thanks.

[Beverleyh]

Use the markup and CSS for the working example then

To highlight the label with CSS only, you need to have the checkbox first, and then you can use the :checked pseudo-class selector in conjunction with adjacent or sibling selectors.

- use the adjacent sibling selector (+) when the label comes immediately after the checkbox
- use the general sibling selector (~) when the labels comes somewhere after the checkbox

[mlotfi]

I think that what I did :

for :

 <input type="checkbox" id="check" class="check-with-label" />
  <label  class="label-for-check">My Label</label>

this css :

.check-with-label:checked + .label-for-check {
  background-color: #b0c4de;
}

works fine.


but why it did not work with :

<label class="label-for-check">
        <input type="checkbox" class="check-with-label" value="ssssss"/> SSSSS</label>

[Beverleyh]

Because it's backwards. You can't check a checkbox and look back UP the DOM with a selector that only goes DOWN the DOM. There isn't currently a selector that goes UP the DOM as an alternative either.

Like I said in my previous post, to style the label for a checked checkbox with CSS, it needs to come AFTER the checkbox - not inside it or in front of it, because there is no CSS selector to interpret that direction.

checkbox:checked + label means something like "when the checkbox is checked, target the label immediately after it"

checkbox:checked ~ label means something like "when the checkbox is checked, target the label somewhere after it"

What you have that doesn't work is label > checkbox:checked which is like saying "when the checkbox that is inside label is checked... (nothing)". It makes no sense - this way, you are not targeting the label when the checkbox is checked (you are not targeting anything) so no styles can be applied to it.

[mlotfi]

Because it's backwards. You can't check a checkbox and look back UP the DOM with a selector that only goes DOWN the DOM. There isn't currently a selector that goes UP the DOM as an alternative either.

Like I said in my previous post, to style the label for a checked checkbox with CSS, it needs to come AFTER the checkbox - not inside it or in front of it, because there is no CSS selector to interpret that direction.

checkbox:checked + label means something like "when the checkbox is checked, target the label immediately after it"

checkbox:checked ~ label means something like "when the checkbox is checked, target the label somewhere after it"

What you have that doesn't work is label > checkbox:checked which is like saying "when the checkbox that is inside label is checked... (nothing)". It makes no sense - this way, you are not targeting the label when the checkbox is checked (you are not targeting anything) so no styles can be applied to it.

Thanks lot Beverleyh, I learned new things from you, I appreciate it.