How ot Works ?
As you can see, it relies on the :checked pseudo-class and on the general sibling selector
~. Please note that it also works like a charm with the adjacent sibling selector
+. Basically, it says “if the checkbox is checked, then the following elements with the
.to-be-changedclass will be red”.
Okay, a checkbox isn’t very sexy, but you can totally make something nicer by hiding the checkbox and binding a label to it. Something like this maybe:
So we hide the checkbox and use the label to trigger the click event.
This way, you have some kind of button triggering the color change on the paragraph. Isn’t that cool? Re-clicking on the button is switching the color back to black of course.
(Note that there are different possibilities for hiding the checkbox, the most obvious of all being