Click Events With CSS

One thing Hugo Giraudel has always been missing is the possibility to handle click events with CSS. Actually, some people think you shouldn’t have this option since interactions are more like a JavaScript kind of stuff. He understands the idea, but it always bothered him to have to use JavaScript for a very simple click event. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. But there are some very interesting tricks that he can use to detect a click using CSS only, without a single line of JavaScript, and this is what he is going to talk about today.

Aaaaah, the checkbox hack. What a thing my friends! Hugo Giraudel is sure you’ve all heard about the checkbox hack before. It’s probably the most common way to handle a click event in CSS. It relies on, well, a checkbox. What’s cool about a checkbox is the fact that it’s binary. It’s either checked or not checked. There is no “half-way” checked. This is why the checkbox hack is a pretty reliable way to trigger a click event in CSS. Let’s make an example. 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”.