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 anid
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: