A few weeks ago, we were working on a table of contents for the Vanilla JS Academy. It's a script that dynamically creates a list of skip links from the headings in a document. It was a great opportunity to implement the :target pseudo-class, which is a neat CSS selector you might not know about.

As they explain in the MDN Web Docs:

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

An example

In my table of contents project, when you click on a skip link, your browser will scroll to that heading. Because I have the following rule in my stylesheet, the heading will be highlighted with a yellow background:

:target {
background: #ff0;
}

Browser support

The :target pseudo-class is supported back to IE9. You can check out the compatibility data on Can I Use.

Learn more

The following pages in the MDN Web Docs are helpful: