【CSS】::selection（擬似要素） - 選択範囲

CSSの擬似要素/selectionについて解説します。

検証環境

CSS

macOS

14.1

selection

擬似要素/selection“選択要素を表す擬似要素”です。

通常、マウスカーソルやタップで範囲選択したテキストなどのセレクターとして使用します。

基本構文

::selection {
    プロパティ名: プロパティ値;
}

サンプル

『p要素内の範囲選択テキスト』を意味するセレクターのサンプルです。

プレビューのテキストを範囲選択（ドラッグ）すると、その範囲のテキストが赤色に変わります。

sample.html

<style>
___ih_hl_start
p::selection {
___ih_hl_end
    color: red;
}
</style>

<p>CSSの正式名称はCascading Style Sheetsです。セレクターやプロパティを定義し、ブラウザ表示のレイアウトや見た目を定義します。</p>

プレビュー