CSS ::target-text Selector

❮ Previous Selectors Next ❯

Experimental: This is an experimental technology.

Example

::target-text {
  background-color: red;
  color: white;
}
Try this code ❯

Meaning

The ::target-text selector represents the text that has been scrolled to if the browser supports text fragments. It allows authors to choose how to highlight that section of text.

See ::target-text demo sel-target-text-demo.html#:~:text=Hello%20World!.

Version: CSS3



Standard Syntax

::target-text {
  css declarations;
}


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Text fragments

Text Fragments allow you to link directly to a specific portion of text in a web document, without requiring the author to annotate it with an ID, using particular syntax in the URL fragment.

Text fragments make this a reality — they allow link authors to specify text content to link to, rather than document fragments, in a flexible manner.

Syntax

In a similar manner to document fragments, text fragments are appended onto a URL after a hash symbol (#). The syntax however is a bit different:

/* simple syntax*/
https://example.com#:~:text=targetText

/* Complicated syntax*/
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
❮ Previous Selectors Next ❯