← Back toCSS Animation

Highlighting target element

Written byPhuoc Nguyen
28 Aug, 2023
Do you want to draw your users' attention to a specific element on your webpage when they scroll to it? Highlighting that element could be the perfect solution. In this post, we'll show you how to create an animation that highlights your target element.

Anchor elements

To scroll to a specific element on a page, there are two common ways to do it. You can either use JavaScript DOM APIs like `window.scrollTo` or `window.scrollTop` to update the scroll position, or you can use the `id` attribute of the target element.
The second approach is better for accessibility because you can share direct links. For example, let's say we have a section with the `id` of `section-1`.
<div id="section-1">...</div>
To access the section, we can use a direct link that looks like `http://example.com/path/to/page#section-1`. When you load the URL, the browser will automatically jump to the section you want to see. It's that simple!
Many websites now attach IDs to their headings, like this:
<h2 id="section">...</h2>
We can easily navigate to different sections of a web page by using the target's id attribute, preceded by a `#` character.
<a href="#section-1">Go to section 1</a>

:target pseudo-class

Let's dive into the `:target` pseudo-class in CSS. This powerful tool lets you select and style the element that's currently being targeted by the URL's fragment identifier (the part of the URL after the # symbol).
To add some style to the targeted element, simply use the `:target` pseudo-class. For example, you could highlight the background color of the targeted section using this CSS code:
:target {
animation: highlight 3s ease-in-out;
@keyframes highlight {
from {
background-color: rgb(253 224 71);
to {
background-color: #fff;
In this example, we'll animate the background color of the selected element. It'll start as `rgb(253 224 71)` and smoothly transition to white over three seconds.


Let's take a look at a real-life situation where the highlight animation could come in handy. You can see this example on any Wikipedia page. Every article on Wikipedia (like this CSS page) typically has many reference notes that provide additional content. When you click on a reference note, also known as a cite note, the page will automatically scroll down to its corresponding reference section.
<sup id="ref-1" class="reference">
<a href="#note-1">[1]</a>
To enhance users' navigation experience, each reference section also includes a link that allows them to jump back to the original citation note.
<div id="note-1">
<a href="#ref-1" title="Jump up">^</a>
<!-- Content of the note goes here ... -->
In the sample code above, you'll notice that there's a cite note and its reference, and both of them have an `id` attribute.
Check out the demo below, which uses the animation from the previous section to highlight either the reference or the cite node, depending on which one is the current target.
A small secret
When you play with the demo above and click on a note and reference, it will scroll to the target, but you won't see the corresponding ID attribute in the browser's address. This happens because the demo lives in its own iframe.
The code below is used within the iframe:
document.addEventListener('DOMContentLoaded', () => {
const anchors = document.querySelectorAll('a.anchor');
const iframeDocument = document.body.ownerDocument;
[...anchors].forEach((noteEle) => {
anchorEle.addEventListener('click', (e) => {
iframeDocument.location.hash = anchorEle.getAttribute('href').slice(1);
The code sample manages click events for all anchors within an iframe. In the event handler, we prevent the default behavior of scrolling to the target of the outer page, instead of the iframe itself.
Additionally, it updates the window's hash that the iframe belongs to, based on the `href` attribute of each anchor.
In simple terms, using the `id` attribute, this code allows for navigation inside an iframe to function just like on a regular webpage.

Keeping a highlighted element until clicking outside of it

If you want to keep an element highlighted until the user clicks outside of it, you'll need a little help from JavaScript. One approach is to handle the click event of the entire page and determine if the user clicks outside of the target element. If they do, you can remove the highlight styles from the target by removing the hash from the URL.
You can check out this feature on GitHub by simply navigating to any comments of a specific issue.
Here's some sample code that demonstrates this approach:
document.addEventListener('click', (e) => {
const clickedEle = e.target;

// Get the current hash
const hash = window.location.hash;
if (!hash) {

const id = hash.slice(1);
const targetEle = document.getElementById(id);
if (targetEle && !targetEle.contains(clickedEle)) {
// Users click outside the target
// Update the hash
window.location.hash = '';
In the same code above, we find the `id` attribute from the hash and locate the element that shares the same `id` attribute. If the clicked element is not contained within the target element, meaning that the user has clicked outside of it, we reset the hash to empty. This results in the removal of the `:target` styles from the currently highlighted element.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn