CSS Reference Pseudo-class

:target

The :target pseudo-class is used to style an element that is the target of an internal link in a document.

Some web pages contain links that point to certain sections or elements on the same page, instead of pointing to other pages. Such links point to elements in the page that have a certain ID, and they point to them by using an element’s ID as the value for the link’s href attribute. For example, the following link points to an element on the page with an ID of article-demo.

<a href="#article-demo">Go To Demo</a>

<!-- somewhere in the page an element with an ID "article-demo" exists -->
<section id="article-demo">
    <!-- content here -->
</section>
                

When the link is clicked, the URI of the page gets what is known as a fragment identifier, which identifies the element in the page which is the target that the link points to. URIs with fragment identifiers at the end link to a certain element in the document, known as the target element. The :target pseudo-class is used to style that element.

fragment-identifier
A URI with a fragment identifier added to its end after clicking an internal link in this article. A fragment identifier is made up of a hashtag (#) followed by the identifier (ID) which identifies the target element in the page. The fragment identifier at the end of the URI is also known as the “hash” of the URL.

So, in more technical words: the :target pseudo-class selects the unique element, if any, with an ID matching the fragment identifier of the URI of the document.

Internal links inside a document are mostly used in long articles split into separate sections. Such articles usually get a table of content at the top of the article which allows the reader to skip sections and jump to a specific section in the article directly. When the link to the section is clicked, the URI of the page gets a fragment identifier which is the ID of the targeted section—this allows the URI to be shared so that when someone visits the new URI (with the ID), they will be directed to that specific section in the page instead of the beginning of the article.

So, simply put, :targetis used to style the target element of a link, whose ID matches the URL hash value. But how or when would you want to style the target element?

The Yellow Fade Technique—Highlighting The Target Element

The Yellow Fade Technique (YFT) was introduced by 37 Signals to highlight newly added content in a page in order to attract the user’s attention to it.

Using the same principle of highlighting content to attract a user’s attention or guide a user’s eye, the :target pseudo-class can be very useful for highlighting target elements inside a page when the browser scrolls (or jumps) to those elements. But why would you want to (or need to) do that? The browser would normally scroll down to the target element enough so that the element sticks at the top of the viewport, thus bringing attention to that element. But what if the browser can’t scroll down enough to do that because there isn’t enough vertical space to allow that amount of scrolling? For example, if the target element is at the end of the page with no enough content after it to allow more scrolling, the browser won’t be able to stick it at the top of the viewport. In this case, clicking the link will scroll the page down to the element but it won’t be clear which element is the target element because it won’t be the one stuck at the top of the viewport.

This is where the :target pseudo-class comes in use. Using :target, we can recreate the YFT with CSS3 animations to highlight the target element to attract the reader’s eye to it so that she knows that it is the target of the link she clicked.

To better understand that, click on any of the links on the left in the following demo. Each link targets a corresponding section. When you click on a link, its corresponding section is scrolled to the top of the viewport. But when you click on the last section, the browser will scroll down enough so that the section is in the viewport, but it can’t scroll down more to stick the last section to the top of the viewport since there isn’t enough content after it to allow that.

View this demo on the Codrops Playground

As you can see, when you click the links to the last two sections, the two sections won’t be scrolled to the top of the viewport. If you click the link to the last section, there is no way to know where that section starts at first—you have to look for it yourself. And if the sections didn’t have any headings, you wouldn’t be able to easily tell which section is the target of the link you clicked.

Using the :target pseudo-class, we’re going to target the sections and give them temporary styles that highlight them once they’re targeted. This makes sure your eyes are guided to the target section, even if it is not scrolled to the top of the viewport.

View this demo on the Codrops Playground

The code to do that is simple:

section:target {
    /* animation OR other styles */
}
                

The above rule says that sections that are targeted by a link should get the specified set of styles. The styles can be temporary using an animation like we did in the demo above, or more permanent like adding a border for example to the target element—anything works.

Trivia & Notes

The :target pseudo-class also works on elements hidden with display: none. The element that would be hidden can be set to be displayed when it is targeted by a link. For example, if we had a link in our markup that targeted an element of ID element:

<a href="#element">Go To Element</a>

<div id="element">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, suscipit, at autem animi praesentium perspiciatis quis mollitia eius minima quae quaerat delectus nostrum dolore. Quia voluptate perferendis in modi a.
</div>
                

The hidden element can be shown when it is targeted by the link like so:

#element {
    display: none;
}

#element:target {
    display: block;
}
                

The YFT can be used here as well to highlight the element if there aren’t enough visual cues to do that.

Examples

In addition to the examples shown above, the :target pseudo-class can be used to create a simple CSS-only lightbox gallery effect. The idea is the simple: links on the page target certain images that are initially hidden, and when a link is clicked, the targeted image is animated into view using the :target styles.

Christian Heilmann created a basic and simple gallery using this technique. Mary Lou also wrote a similar tutorial here on Codrops showing how this can be done. Here are links to both articles:

Both the articles have live demos included for you to check out and fiddle with and/or download.

The following snippet is kind of like a “micro” version of an effect similar to the lightbox effects mentioned. It scales an image up using CSS transforms when a link to the image is clicked. The image is the target of a link and hence can be styled as a :target.

<a href="#image">Open Image</a>
<img src="autumn-bird.png" alt="image of a bird in autumn" id="image">
                

The image is initially scaled down to zero size with its opacity also set to zero; i.e. it will be hidden. :target is used to style the image when it is targeted by the click of the link—the image is scaled up and its opacity is set to one, making it fully opaque. A CSS transition is used to smooth the effect.

/* image is initially "hidden" by scaling it down */
#image {
    display: block;
    transform: scale(0);
    opacity: 0;
}

/* when the image is targeted, it is scaled up */
#image:target {
    transition: all .3s linear;
    transform: scale(1);
    opacity: 1;
}

                

You can see the live demo of this example in the next section.

Note that when the link is clicked, the URL of the page gets a fragment identifier at its end which is a hashtag with the value of the image’s ID. Clicking on the link one more time after it’s been clicked the first time will not trigger the opening effect again—the image is already open and its identifier is set in the page’s URL so it will maintain its :target state. To see the effect again, you will have to remove the hash from the URL.

Live Demo

Click on the black link in the following demo to see the target image open.

Note that the browser still jumps to the image’s position trying to stick it at the top of the viewport if it has enough vertical scrolling space. However, if you view the demo in a page of its own, the page may not jump to the image, and therefore the opening effect of the image serves as a visual cue for the user to know which element was targeted by the link they clicked.

View this demo on the Codrops Playground

If you want to fight the jump and prevent the user from jumping to the image, you can do that using JavaScript, but that can have unwanted side effects. You can also check out this technique by Lea Verou.

Browser Support

The :target pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, Android 2.0+ and Mobile Safari 2.0+.

Written by

Last updated February 5, 2015 at 10:27 am by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.