::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: 155Edge
12–88Not supported
89+Supportedsince Mar 4, 2021
Current: 154Firefox
1–130Not supported
131+Supportedsince Oct 1, 2024
Current: 157Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27MobileChrome Android
18–88Not supported
89+Supportedsince Mar 2, 2021
Current: 155Firefox Android
4–130Not supported
131+Supportedsince Oct 1, 2024
Current: 157Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27How 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
}