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:
:targetCSS pseudo-class represents a unique element (the target element) with an
idmatching the URL's fragment.
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 pseudo-class is supported back to IE9. You can check out the compatibility data on Can I Use.
The following pages in the MDN Web Docs are helpful: