Instead of linking to new pages, sometimes links (<a> elements) reference sections, fragments or other elements of the same page. These kind of links are prevalent in one-page website navigation.
The CSS :target pseudo-class selector is used to select and style the target of an internal link in a document, the fragment of the page referenced in a link’s href attribute.
For example, if you have an anchor tag linking to a “further reading” section of an article…
<a href=”#further-reading” title=”Further reading resources” />
<!– … –>
<section id=”further-resources” >
<!— … —>
</section>
…you can use the :target selector to highlight this section when the link is clicked to guide the reader’s eye to it. This highlighting technique is known as the yellow fade technique and was first introduced by 37 Signals.
#further-resources:target {
animation: highlight .8s ease-out;
}
@keyframes highlight {
0% { background-color: #FFFF66; }
100% { background-color: #FFFFFF; }
}
The technique requires that you use a CSS animation to show the color for only a short period of time and then remove it again—the point is to highlight it only enough to guide the reader to it. Check out the live demo showing this technique in action:
See the Pen ogBWmL by Sara Soueidan (@SaraSoueidan) on CodePen.
The above example applied temporary styles to the target of the link. But if you apply more persistent styles, you can create effects scaling elements up, changing their visibility, and much more.
I have recently used this technique on my own website to show a search overlay for my readers to search for articles in. As part of the main navigation, there is a link that links to the search overlay wrapper—a <div> element, containing the search input field.
<a href=”#search”>Search</a>
<!– … –>
<div id=”search”>
<a href=”#” class=”overlay-close”>Close</a>
<h4>Search articles archive.</h4>
<!– … –>
</div>
The search overlay is initially hidden using opacity: 0;. It is positioned so that is remains fixed relative to the viewport using position: fixed;. And in order to make sure that it doesn’t block pointer events from the rest of the page “beneath” it, pointer-events are set to none.
#search-overlay {
position: fixed;
top: 1em;
bottom: 1em;
right: 1em;
left: 1em;
/* … */
opacity: 0;
transition: opacity .3s ease-in-out;
pointer-events: none;
}
Once the Search anchor is clicked, and using the :target selector, the overlay is shown and pointer events are dispatched on it again. In order to show the overlay smoothly, a transition is applied that creates a fading in effect.
#search-overlay:target {
opacity: 1;
pointer-events: auto;
}
The search overlay fades in. Mission…half accomplished—we need to make sure it fades out again when the user requests so.
The overlay container needs to contain another link that will allow us to go back to the main page. To do that, we could give the body or html element an ID, and then have the Close link to that ID—this would do it. However, that is not necessary. By linking to no particular fragment using only the # as a value, you’re practically linking to the main page, but you gain the advantage of not adding any fragment identifier to your page’s URL.
Once the Close link is clicked, we want the search overlay to fade out, so we’re going to add a transition again to the #search-overlay:target to make sure its opacity transitions to 0. You can, of course, avoid this step if you just want to make it disappear instantly when the user closes it.
#search-overlay:target {
opacity: 1;
pointer-events: auto;
transition: opacity .3s ease-in-out;
}
Check out the live demo.
You can take it further and add a transformation animation to the overlay so that it scales up into view as it fades in—kind of like (yes, you guessed it) a Lightbox effect. Instead of an overlay with a search form, you could have an image that would scale into view when its respective thumbnail is clicked. Manoela Ilic has a nice and complete working image gallery showing this in action, with a tutorial explaining the code behind it.
Christian Heilmann also wrote a post about creating a simple image gallery using the :target selector that is also worth checking out.
CSS-only image galleries, modals, and off-canvas navigation, are all examples of fully-functional UI components that you can create using only CSS, by taking advantage of the the :target selector.
I hope this introduction helped show you to the possibilities at hand when using and styling content with CSS pseudo-class selectors.
More to come! 😉