::target-text | CSS-Tricks

The CSS ::target-text pseudo-element selects a text fragment (we’ll explain what those are in a bit) and applies styles to it. Basically, you click a link that includes a text fragment and that fragment is styled, thanks to ::target-text.

p::target-text {
  color: red;
  background-color: white;
}

Syntax

<element-selector>::target-text {
  /* styles */
}

The <element-selector> represents any HTML element that can be referenced and it is optional. If you want it to apply to all text, simply use it without the <element-selector>.

Take note that only a handful of CSS properties apply to ::target-text, which includes:

color
background-color
stroke-width
text-decoration and its constituent properties, including text-underline-position and text-underline-offset
text-shadow

It’s also worth noting that ::target-text works with custom properties.

What’s a text fragment?

To understand this pseudo-class, we must first understand what “target text” is. The target text is the scrolled text referenced by the browser using text fragments.

Text fragments are part of a URL, specifically small portions of text referenced through the /#:~:text= syntax in a link, followed by the target text. For example, I made a demo for this article at the following URL:

https://sunkanmii.github.io/-target-text-example/

I can link to a specific “fragment” of text on the page by appending this to the end of the URL:

#:~:text=This%20part%20should%20be%20highlighted%20and%20styled%20once%20you%20arrive%20here

Put those two together and we get a complete URL that takes you directly to that text fragment on the page:

https://sunkanmii.github.io/-target-text-example/#:~:text=This%20part%20should%20be%20highlighted%20and%20styled%20once%20you%20arrive%20here.

Go ahead and try clicking the link — it should take you to a specific sentence on the page, which the ::target-text pseudo is styling.

Maybe your browser doesn’t support that yet. I’ll include a video that shows the effect:

These text fragments usually pop up when you search for a closely related topic, and the search engine brings a little text snippet from the top search website to highlight your answer. When clicked, it takes you directly to the highlighted text fragment.

Typically, on Google, for example, if no search result pops up, you can click on a dropdown menu and it would highlight some text that would most likely lead to the answer you’re looking for.

Text fragments are pretty interesting, right? Check out the specifications if you want to dive deeper.

Basic usage

With the ::target-text pseudo, we can select any element with text fragments and style them. You can even style it without a preceding selector, so it would target all text fragments.

/* Applies style to all texts in HTML that may be text fragments */
::target-text {
  color: grey;
}

/* Applies style to only text in p tags */
p::target-text {
  color: blue;
}

/* Applies style only text in container class */
.container::target-text {
  color: #1c0245; /* purple that looks hollow */
}

/* Applies style only to text with special-id as its id */
#special-id::target-text {
  color: #fbe407;
}

Demo

Here’s a link to a GitHub repo site I created to highlight how ::target-text works.

The code is easy to follow. Simply have the selector you want to apply ::target-text and add the pseudo-class to it, or have the ::target-text on its own if you want global styling.

::target-text {
  color: #d63384;
  background-color: #fff3cd;
  text-decoration: underline wavy #ff6f61;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}

Specification

The CSS ::target-text pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 specification. This is still being tested and improved upon. I, for one, know I’m still going to submit some tickets.