CSS only Click-handlers You Might not be using, but you should

Image by Author

Enjoy free access to this article with my Friend’s Link — feel free to share it with others!

You’re building a simple website, a good-looking landing page with a “See More” button. Instinctively, you reach for JavaScript to handle the button click event.

But wait — what if I told you that CSS alone could do the job?

Yes. CSS is often underestimated, but it can handle click interactions without JavaScript.

In this guide, you’ll learn how to create CSS-only click handlers using the :target pseudo-class, and explore scenarios where this approach makes perfect sense.

The :target Pseudo-Class

CSS offers several pseudo-classes that let you style elements based on different states (:hover, :focus, :checked).

But there's one you might not have used before—:target.

The :target pseudo-class applies styles to an element when its ID matches the fragment identifier in the URL (the part after #).

This behavior is commonly seen when clicking an anchor link that jumps to a section on the same page.

Here’s a simple example:

<a href="#contact">Go to Contact</a>
<section id="contact">…