CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Element States Pseudo-Classes

Why doesn't "input[type="checkbox"]:checked + label" in this video worth without "+ label"?

I'm curious why we need the + label combinator? Why doesn't the following code achieve the same result?

input[type="checkbox"]:checked { font-weight:bold ; }

1 Answer

akak
akak
29,436 Points

The label is a separate element so we need to target it separately. The code you wrote would "bold" only checkbox element ( since there is no text in this element it won't bold anything). On the other hand if you'd target labels without that checkbox element they would be bold all the time. So it's pretty nifty trick to bold labels only when checkbox is selected.

ywang04
ywang04
6,735 Points

Thanks a lot.