Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

Custom highlights

::highlight() は CSS の擬似要素で、スタイルをカスタムハイライトに適用します。

カスタムハイライトは、 Range オブジェクトの集合であり、 HighlightRegistry を使用してウェブページに登録されます。

::highlight() 擬似要素は、すべての表示強調擬似要素に共通する特別な継承モデルに従います。この継承の仕組みの詳細については、表示強調擬似要素の継承の節を参照してください。

ハイライトテキスト装飾

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:highlight`	105	105	140	17.2	105	17.2
DOM API
`highlights_static` highlights は CSS インターフェイスは静的な読み取り専用プロパティであり、csscustomhighlight_api を使用して任意のテキスト範囲をスタイル設定するために用いる HighlightRegistry へのアクセス手段を提供します。	105	105	140	17.2	105	17.2
`Highlight` Highlight は CSS カスタムハイライト API のインターフェイスで、この API で使用する Range インスタンスの集合を表すために使用します。	105	105	140	17.2	105	17.2
`@@iterator` [シンボル.イテレータ］	105	105	140	17.2	105	17.2
`add` add() は Highlight インターフェイスのメソッドで、 csscustomhighlight_api を使用してスタイル設定される、新しい Range オブジェクトをハイライトに追加します。	105	105	140	17.2	105	17.2
`clear` clear() は Highlight インターフェイスのメソッドで、 Highlight オブジェクトからすべての Range オブジェクトを除去します。	105	105	140	17.2	105	17.2
`delete` delete() は Highlight インターフェイスのメソッドで、 Highlight オブジェクトから特定の Range オブジェクトを除去します。	105	105	140	17.2	105	17.2
`entries` entries() は Highlight インターフェイスのメソッドで、新しいイテレーターオブジェクトを返します。これは、この Highlight オブジェクト内の各 Range オブジェクトを」配列 [range, range] の形で、挿入順に反復処理します。	105	105	140	17.2	105	17.2
`forEach` forEach() は Highlight インターフェイスのメソッドで、Highlight オブジェクト内の各 Range オブジェクトに対して、指定された関数を、挿入順に 1 回ずつ実行します。	105	105	140	17.2	105	17.2
`has` has() は Highlight インターフェイスのメソッドで、 Range オブジェクトが Highlight オブジェクトに存在するかどうかを示す論理値を返します。	105	105	140	17.2	105	17.2
`Highlight` Highlight() コンストラクターは、新しく構築された Highlight オブジェクトを返します。これは Range オブジェクトの集合を保持することができ、 csscustomhighlight_api を用いてスタイル設定することができます。	105	105	140	17.2	105	17.2
`keys` keys() は Highlight インターフェイスのメソッドで、 Highlight.values() メソッドの別名です。	105	105	140	17.2	105	17.2
`priority` 文書内で重複する Range オブジェクトを作成することができます。	105	105	140	17.2	105	17.2
`size` size プロパティは、 Highlight オブジェクト内にある Range オブジェクトの数を返します。	105	105	140	17.2	105	17.2
`type` type は Highlight インターフェイスのプロパティは、ハイライトの意味を指定するために使用される列挙型Stringです。これにより、スクリーンリーダーなどの支援技術は、ハイライトをユーザーに公開する際にこの意味を記載することができます。	105	105	140	17.2	105	17.2
`values` values() は Highlight インターフェイスのメソッドで、Highlight オブジェクト内のすべての Range オブジェクトの値を挿入順に含む新しいイテレーターオブジェクトを返します。	105	105	140	17.2	105	17.2
`HighlightRegistry` HighlightRegistry は CSS カスタムハイライト API のインターフェイスで、 API を用いて Highlight オブジェクトをスタイル設定するために使用します。これは CSS.highlights_static からアクセスできます。	105	105	140	17.2	105	17.2
`@@iterator` [シンボル.イテレータ］	105	105	140	17.2	105	17.2
`clear` clear() は HighlightRegistry インターフェイスのメソッドで、この HighlightRegistry からすべての Highlight オブジェクトを除去します。	105	105	140	17.2	105	17.2
`delete` delete() は HighlightRegistry インターフェイスのメソッドで、この HighlightRegistry から名前付き Highlight オブジェクトを除去します。	105	105	140	17.2	105	17.2
`entries` entries() は HighlightRegistry Hインターフェイスのメソッドで、 HighlightRegistry オブジェクト内の各要素の [name, highlight] ペアを挿入順に反復処理する、新しいイテレーターオブジェクトを返します。	105	105	140	17.2	105	17.2
`forEach` forEach() は HighlightRegistry インターフェイスのメソッドで、レジストリーのすべての Highlight オブジェクトに対して、挿入順に 1 回ずつ、指定された関数を実行します。	105	105	140	17.2	105	17.2
`get` get() は HighlightRegistry インターフェイスのメソッドで、このレジストリーから名前付き Highlight オブジェクトを返します。	105	105	140	17.2	105	17.2
`has` has() は HighlightRegistry インターフェイスのメソッドで、指定された名前の Highlight オブジェクトがこのレジストリーに存在するかどうかを示す論理値を返します。	105	105	140	17.2	105	17.2
`keys` keys() は HighlightRegistry インターフェイスのメソッドで、この HighlightRegistry オブジェクト内のすべての Highlight オブジェクトのキーを挿入順で含む新しいイテレーターオブジェクトを返します。	105	105	140	17.2	105	17.2
`set` set() は HighlightRegistry インターフェイスのメソッドで、 Highlight オブジェクトを指定した名前でレジストリーに追加または更新します。	105	105	140	17.2	105	17.2
`size` size プロパティは、 HighlightRegistry の中にある Highlight オブジェクトの数を返します。	105	105	140	17.2	105	17.2
`values` values() は HighlightRegistry インターフェイスのメソッドで、 HighlightRegistry オブジェクト内のすべての Highlight オブジェクトの値を挿入順に含む新しいイテレーターオブジェクトを返します。	105	105	140	17.2	105	17.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

::highlight(search-result) {
  background-color: #ffeb3b;
  color: black;
}
::highlight(spelling-error) {
  text-decoration: wavy underline red;
}

ライブデモ

Searchresult style

CSS Searchresult style demo.

プレビュー全画面表示

Errordisplay style

CSS Errordisplay style demo.

プレビュー全画面表示

mlcol-

CSS mlcol- demo.

プレビュー全画面表示

実務での使いどころ

検索結果のハイライト表示

ページ内検索の結果をDOM構造を変えずにハイライトし、パフォーマンスを維持しながら視覚的フィードバックを提供します。

注意点

Firefoxでは2026年3月時点で未サポートです。また、::highlight()で適用できるプロパティは限定されています。

参考リンク

MDN Web Docs — Custom highlights

対応ブラウザ

基本構文

ライブデモ

Searchresult style

Errordisplay style

mlcol-

実務での使いどころ

検索結果のハイライト表示

注意点

アクセシビリティ

参考リンク