::highlight()

Limited availability

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

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

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

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

利用可能なプロパティ

特定の CSS プロパティだけが::highlight() で利用できます。

color
background-color
text-decoration および関連するプロパティ
text-shadow
-webkit-text-stroke-color、-webkit-text-fill-color、-webkit-text-stroke-width

特に、background-image は無視されます。

構文

css

::highlight(custom-highlight-name)

例

文字をハイライト

HTML

html

<p>CSS カスタムハイライト API の虹</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

const textNode = document.getElementById("rainbow-text").firstChild;if (!CSS.highlights) {  textNode.textContent =    "このブラウザーは、 CSS カスタムハイライト API には対応していません。";}// 虹の各色ごとにハイライトを作成して登録const highlights = [];for (let i = 0; i < 7; i++) {  // この色に対して新しいハイライトを作成  const colorHighlight = new Highlight();  highlights.push(colorHighlight);  // このハイライトをカスタム名で登録  CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);}// テキストを 1 文字ずつ反復処理for (let i = 0; i < textNode.textContent.length; i++) {  // この文字専用の新しい範囲を作成  const range = new Range();  range.setStart(textNode, i);  range.setEnd(textNode, i + 1);  // 次の利用できるハイライトに範囲を追加し、  // 7 番目に達したら最初のハイライトに戻る  highlights[i % 7].add(range);}

結果

仕様書

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

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on2026年1月24日 byMDN contributors.

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

Movatterモバイル変換