A CSS-Only Click Handler Using the :target Pseudo-Class (No JavaScript)

There’s often a point when you’re building a website, especially a simple landing page, when you realize you’re going to have to introduce some JavaScript. CSS, however, can often do a lot more than we give it credit for. Here we’ll look at creating click handlers with only CSS! 🔥

Let’s say we’re building an HTML and CSS landing page and we decide we want a “See more!” button to display a section of text. As soon as we think of a click event, usually it leads us to one word: JavaScript.

As web developers, most of us spend a lot of time with JavaScript-- and that’s great! However, there are tons of things we can do with just CSS that we may not even know about! 💅

The CSS Pseudo-Class :target

There are lots pseudo-classes in CSS that can help us style elements in different states. For example, you can style a button when it’s hovered, active, focused, etc.

One pseudo-class you might not have heard about, though, is the :target pseudo-class.

The :target pseudo-class is used to select an element when that element’s ID matches part of the current URL.

When Would an Element’s ID Match a URL?

A common use case for having an element’s ID show up in the URL is if you’re using an anchor tag (<a>) to jump to a specific spot on the current page. For example, if it’s your personal website, you might have a “Contact” button at the top of the page. On click, it could bring the user to the footer to see all your contact information.

Using an Anchor Tag to Jump Positions on the Page

If you’ve used an <a> tag before, you’re likely familiar with the href attribute. If you’re trying to link to a website, like Alligator.io for example, you’d create the link in your HTML like this:

<a href='https://alligator.io'>
  Click me! 🐊
</a>

However, if you want your user to stay on the current page and jump down to the footer, for example, all you have to do is set an ID on the footer and use that ID for the href value in the <a> tag.

<a href='#footer'>
  Go to the footer!
</a>

When the user clicks on this footer link, the page will jump to the footer and their current URL will get updated to look like:

https://www.imawebsite.com/#footer

The footer element’s ID is now part of the current URL. In other words, it’s the target! 🤓

Creating Click Handlers with :target

Now that we know how to create a target with HTML, how do we use that target to create a click handler without any JavaScript? Thankfully, it takes just a little CSS! 🌈

Using our “See more!” button example from above, let’s start by creating a link to see more text:

<a href='#seeMore'>
  See more!
</a>

Our section of text we want to see doesn’t exist yet, so let’s create that too.

<a href='#seeMore'>
  See more!
</a>

<section id='seeMore'>
  <p>
    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.
  </p>
</section>

When you click the “See more!” button, the URL will update to look like this:

https://www.imawebsite.com/#seeMore

The problem we have now is that the #seeMore section is visible to the user even though it’s not supposed to be yet! 🙈

Since this is all the HTML we’ll need so far, let’s add our CSS to manage showing the text block on click.

First, let’s hide the text that shouldn’t show yet.

<style>
  #seeMore {
    display: none;
  }
</style>

Now the text in the #seeMore section doesn’t show on load or when you click the “See more!” button. This is where the :target styling comes in. Let’s use the :target pseudo-class to update the styling when the “See more!” button gets clicked.

<style>
  #seeMore {
    display: none;
  }

  #seeMore:target {
    display: block;
  }
</style>

It is literally as simple as that! On load, our text section will not show. As soon as you click the “See more!” button, it will add #seeMore to the URL and the #seeMore section becomes the target. Once #seeMore becomes the target, it will have its :target styling applied, which displays the text. 🥳

Using :target to Toggle the Display

If an element wasn’t visible to begin with, you will probably want the option to hide it again.

Luckily, we can do that with just one more line of HTML (no CSS!) 💪

Using the same example as above, let’s expand the HTML to include a “Hide text” button.

<a href='#seeMore'>See more!</a>

<section id='seeMore'>
  <p>
    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.
  </p>

  <a href='#'>Hide text</a>
</section>

Notice that there’s a new <a> tag in the text section. Since it’s in the element that only shows when the user clicks “See more!”, the “Hide text” button will only show if the hidden text becomes visible. That is, the user doesn’t need to see the button to hide text unless there’s text to hide.

The href value on the “Hide text” button is “#”. This is because we want to update the URL to no longer include #seeMore. When the “Hide text” button is clicked, it will update the URL to look like this:

https://www.imawebsite.com/#

With the URL updated, #seeMore is no longer the target, and the #seeMore:target styling no longer gets applied. The block of text (including the “Hide text” button) will, therefore, go back to having the display: none; styling applied.

In short, update the URL and the text that was originally not displayed goes back to not being displayed. We officially have a way to toggle the text! ✨

Examples of When to Use :target

If you’re not sure when you would actually use the :target pseudo-class, here are some examples of how you could:

• Click a hamburger icon to show your site’s navigation menu. Include an icon to close the navigation.
• Click an icon to display a modal. (Note: Make sure your modals are accessible if you’re going to use them! 🤓)
• Update the styling of the currently selected tab in your navigation bar when it gets clicked.

Browser Support

The browser support for the :target pseudo-class is fantastic and you basically don’t need to worry about it unless you’re supporting IE8. As always, though, check Can I Use to be sure. 🚀