1. Web
  2. CSS
  3. Reference
  4. Selectors
  5. ::highlight()

::highlight()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The ::highlight() CSS pseudo-element applies styles to a custom highlight.

A custom highlight is a collection of Range objects and is registered on a webpage using the HighlightRegistry.

The ::highlight() pseudo-element follows a special inheritance model common to all highlight pseudo-elements. For more details on how this inheritance works, see the Highlight pseudo-elements inheritance section.

Allowable properties

Only certain CSS properties can be used with ::highlight():

In particular, background-image is ignored.

Syntax

css
::highlight(custom-highlight-name)

Examples

Highlighting characters

HTML

html
<p id="rainbow-text">CSS Custom Highlight API rainbow</p>

CSS

css
#rainbow-text { font-family: monospace; font-size: 1.5rem; } ::highlight(rainbow-color-1) { color: violet; text-decoration: underline; } ::highlight(rainbow-color-2) { color: purple; text-decoration: underline; } ::highlight(rainbow-color-3) { color: blue; text-decoration: underline; } ::highlight(rainbow-color-4) { color: green; text-decoration: underline; } ::highlight(rainbow-color-5) { color: yellow; text-decoration: underline; } ::highlight(rainbow-color-6) { color: orange; text-decoration: underline; } ::highlight(rainbow-color-7) { color: red; text-decoration: underline; }

JavaScript

js
const textNode = document.getElementById("rainbow-text").firstChild; if (!CSS.highlights) { textNode.textContent = "The CSS Custom Highlight API is not supported in this browser!"; } // Create and register highlights for each color in the rainbow. const highlights = []; for (let i = 0; i < 7; i++) { // Create a new highlight for this color. const colorHighlight = new Highlight(); highlights.push(colorHighlight); // Register this highlight under a custom name. CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight); } // Iterate over the text, character by character. for (let i = 0; i < textNode.textContent.length; i++) { // Create a new range just for this character. const range = new Range(); range.setStart(textNode, i); range.setEnd(textNode, i + 1); // Add the range to the next available highlight, // looping back to the first one once we've reached the 7th. highlights[i % 7].add(range); }

Result

Specifications

Specification
CSS Custom Highlight API Module Level 1
# custom-highlight-pseudo
CSS Pseudo-Elements Module Level 4
# selectordef-highlight-custom-ident

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content