これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

CSS::selection 疑似要素は、ユーザーが(マウスなどで)選択した文書の一部にスタイルを適用します。

::selection {
  background: cyan;
}

利用できるプロパティ

::selection 擬似要素では、一部の CSS プロパティのみが利用できます。

特に、 background-image が無視されることに注意してください。

構文

/* Firefox での構文 */
::-moz-selection

::selection

HTML

<div>この文字列は選択すると特殊なスタイルになります。</div>
<p>こちらの段落も文字列を選択してみてください。</p>

CSS

/* 選択された文字列を赤の背景の金色にする */
::-moz-selection {
  color: gold;
  background: red;
}

::selection {
  color: gold;
  background: red;
} 

/* 選択された文字列を青の背景の白にする */
p::-moz-selection {
  color: white;
  background: blue;
}

p::selection {
  color: white;
  background: blue;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Pseudo-Elements Level 4
::selection の定義
草案 初回定義。

メモ: ::selection は CSS Selectors Level 3 の草稿にはありましたが、(特に要素がネストされた場合の)振る舞いの仕様化が途中であることや相互運用性が確保されなかったこと(W3C Style mailing list での議論に基づく)から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート1 有り1 -moz- 99.51.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート ? ? 有り ? ? ? ?

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09, momdo, ethertank, sosleepy
 最終更新者: mfuji09,