これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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;
}

結果

アクセシビリティへの配慮

純粋に美的な理由で、オペレーティングシステムで既定のテキストのスタイル、特にユーザーがニーズに合わせてカスタマイズしたものを上書きしないようお勧めします。認知の問題を抱えている人や、技術的な知識に弱い人にとって、このように操作すると機能の理解に影響します。

上書きする場合は、強調表示をしたときに、選択したテキストの色と選択したテキストの背景とのコントラスト比が、弱視の人でも十分に読むことができることを確認することが重要です。

色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

仕様策定状況

仕様書 策定状況 コメント
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,