::highlight()

Baseline 2026

利用可能なプロパティ

特定の 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 id="rainbow-text">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);
}