Looking at the :target Pseudo-class and some Use Cases

I haven't used the target CSS pseudo-class much in my web development work, so I wasn't super familiar with how it worked. I have been meaning to add table of contents to this site for quite some time now, and having finally got that done. As you can see above, we have a table of contents, and when you click on an item you are taken to the corresponding heading. As is this was super cool, but I want to add a highlight to the heading you had just clicked on and this is where target comes in. 

In this article, we are going to look at how this is done and also look at creating a pure CSS mobile menu. Let's get stuck in. 

What is :target

:target is a CSS pseudo-class. If you have worked with HTML and CSS even a little, you will be familiar with :hover. The :hover pseudo-class is a user action pseudo-class, whereas :target is a location pseudo-class.

Both user action and target pseudo-classes are used on links. The difference being location based pseudo-classes are concerned with the link element or target element of a link regardless of the user's current interaction with the page.

Let's take a simple example of how the target pseudo-class can be used.

How do you use :target

For :target to work, we need a link and an element. From the link, we can target any element. We do this by using an #id. In the link href we use the id of the target. This can be on the same page or on another page.

In the below example, we have a link that targets the p with an id that starts with anchor. 

<p><a href="#anchor-my-interesting-target-paragraph" >Link to My Interesting Target Paragraph.</a></p>
<p><a href="#anchor-my-interesting-target-paragraph-2" >Link to My Interesting Second Target Paragraph.</a></p>
<p>Some other not so interesting content in a paragraph :)</p>
<p id="anchor-my-interesting-target-paragraph">My Interesting Target Paragraph.</p>
<p id="anchor-my-interesting-target-paragraph-2">My Interesting Target Paragraph.</p>

Next, we add the target pseudo-class to the element or selector in the CSS. When adding the :target pseudo-class, you can add to the id or you can also add it to the element selector. In the example below, I have added it to the paragraph tag. This means you can target any paragraph tag from a link and the target rule will work.

p:target {
  /* Add you styles for you targeted elment */
  color: red;
}

To be more specific, you can also use an id or an attribute selector, as illustrated below.

#anchor-my-interesting-target-heading:target,
[id^="anchor-"] {
  /* Add you styles for you targeted elment */
  color: red;
}

What are the Use Cases for the :target Pseudo-class?

There are many use cases for the :target pseudo-class. Let's have a look at a couple.

1. Highlight target text or animate targeted headings when using it with anchor.
2. Toggle display of targeted element for a basic Mobile Menu.  

Highlight targeted text or animate target headings when using it with anchors

Targeting headings using an #id is a common pattern. You can target any location on a page with this method. However, as such, you aren't really given any indication where on the page you have been taken. True, if the link you clicked has the same text as the heading as it should, then the user should be able to work things out. But what if you used :target on the heading to highlight it. Let's do that.

This is a great pattern. If you don't want your heading to remain highlighted, you can also as the transition to the target rule so it fades out.

The below code targets the h2 and the h3 that follows the span that the TOC.js module adds. Go ahead, scroll to the top of this page and click on a table of content link to see it in action. 

span[id^="toc-"]:target + h2,
span[id^="toc-"]:target + h3 {
  display: inline-block;
  background-color: #ffeeba;
  background-size: 120%;
  width: fit-content;
  height: fit-content;
  margin: 1rem;
  padding: 1rem;
  position: relative;
  left: -2rem;
  border-radius: 10px;
  /*
    animation: 2s 3s forwards bc-color;
    box-shadow: -10px 0 0 12px #ffeeba;
   */
}

Wow, is this great! Let's now look at creating a basic menu.

Toggle display of targeted element to create a Mobile Menu

Another use case is using it to toggle the display of an element to create a simple menu as illustrated below.

<header id="header">
  <h3>The Mob</h3>
 
  <a href="#target-open-nav" class="mobile-menu-toggle button">
    Menu
  </a>

  <nav id="#target-open-nav" class="mobile-menu">
    <a href="#close" class="mobile-menu-toggle-close button">
      Close
    </a>

    <menu>
      <li><a href="#p">Product</a></li>
      <li><a href="#a">About</a></li>
      <li><a href="#c">Contact</a></li>
      <li><a href="#h">Home</a></li>
    </menu>
  </nav>
</header>

To close the menu, you can target any other ID that exists or doesn't exist. All you need to do is remove the #target-open-nav from the URL. I target #close in the above code. 

If you want to see it in action, you, which is can check the demo of the :target menu, and the full code for the :target menu demo is on GitHub.

This can be used quite successfully for a basic menu and with a basic transition it can look great too. However, you will still need to use a little JavaScript to make it accessible. You need to make the main content on the site inert while the menu is open. To do this, check out the Making a Mobile Menu Part 2 article.

:target Pseudo-class Support

Support is good for this at 98.59% which is full support. So no reason not to use it.

Summary 

That is it for :target pseudo-class. We have learnt how it works and then looked at some use cases. Can you think of any more or have you used it in any unique ways not mentioned above? If so, I'd love to hear about it. Make a comment below.

Thanks for reading. Be sure to sign up for the newsletter. Nuggets of front-end development and technology shared every week with love. Until next time, seize the day!