coderef

::target-textBaseline · Newly available

The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Dec 11, 2024.

Browser support

DesktopChrome
1–88Not supported
89+Supportedsince Mar 2, 2021
Current: 155
Edge
12–88Not supported
89+Supportedsince Mar 4, 2021
Current: 154
Firefox
1–130Not supported
131+Supportedsince Oct 1, 2024
Current: 157
Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27
MobileChrome Android
18–88Not supported
89+Supportedsince Mar 2, 2021
Current: 155
Firefox Android
4–130Not supported
131+Supportedsince Oct 1, 2024
Current: 157
Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27

How to use

Every current browser supports this, but it only became Baseline on Dec 11, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: ::target-text.

Feature detection

CSS · check before using
@supports selector(:target-text) {
  /* styles that use :target-text */
}

/* or in JavaScript */
if (CSS.supports("selector(:target-text)")) {
  // use it
}