`::highlight()` - CSS Selector

::highlight()

Summary of characteristics of the `::highlight()` selector

Quick description

Pseudo-element that targets the text selected after a search with Javascript.

Status

Standard

W3C Module

CSS Pseudo-Elements Module

References (W3C)

CSS Pseudo-Elements Module Level 4

Document status: WD (Working Draft)

`::highlight()` pseudo-element - Description.

::highlight() targets the text highlighted by JavaScript using the CSS Custom Highlight API library. This library lets you select parts of text anywhere on the page.

The operation requires several steps:

Create one or more Range objects that each define a portion of text to highlight.
Group these objects into a Highlight object.
Link this object to a CSS-usable identifier.
Use ::highlight() with this ID to target the texts.

Few properties can apply to ::highlight():

The color of the text.
The background color.
text-decoration and the detailed properties. ⚠
Text shadow (text-shadow). ⚠

The example below searches for the entered word within the text of the description section of this page. It is first searched without considering case (highlighted in light blue), then with case sensitivity (highlighted in blue).
Compared to a classic search, this has the advantage of only looking in the desired spots, and not in the table of contents, for example. On the other hand, since the search is done in JavaScript, we have complete freedom to do whatever we want, here distinguishing texts that respect case from those that don’t.