CSS doesn’t provide any official way to handle a click event in CSS. But there are some very interesting tricks that we can use to “detect” a click using CSS only, without a single line of JavaScript, and this is what we are going to talk about today. How ot Works ? The HTML 1 2 < input type = "checkbox" > < p class = "to-be-changed" >I'm going to be red! It's gonna be legen... Wait for it...</ p > The CSS 1 2 3 4 5 6 7 .to-be-changed { color : black ; } input[type=checkbox]:checked ~ .to-be-changed { color : red ; } 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-changed class will be red”. Okay, a check...
Comments
Post a Comment
Do Not Spam