Tutorial

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

Published on August 22, 2019
Default avatar

By Jess Mitchell

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

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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>

button getting clicked to show more text

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! ✨

button getting clicked to hide 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. 🚀

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Jess Mitchell

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel