Cool People Link to Text Fragments

Just in case you didn’t know, you don’t need a page to have ID’s on elements anymore in order to jump down to a particular place. We’ve reached support across all major browsers to link to Text Fragments, like:

https://frontendmasters.com/courses/#:~:text=Web%20Performance%20Fundamentals%2C%20v2

The #:~: syntax is kinda funky, but here we are, and it’s not too hard to get your hands on:

Chromium browsers have a “Copy Link to Highlight” option in the context menu when you right-click highlighted text.

Cool People Link to Text Fragments — David Bushell

What I’m just learning is that you can style the selected fragment (a little), just like you can with :target. I suppose ::target-text is a pseudo-element because it’s selecting potentially a part of an element that doesn’t otherwise exist, but :target is a pseudo-class because it selects an entire element that does exist.

Looking for a complete course on getting into web development?

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.