::selection
::selection は CSS の擬似要素で、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。
::selection 擬似要素は、すべての表示強調擬似要素に共通する特別な継承モデルに従います。この継承の仕組みの詳細については、表示強調擬似要素の継承の節を参照してください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 62 | 1.1 | 18 | | |
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
基本構文
CSS
::selection {
background-color: #3498db;
color: white;
}
p::selection {
background-color: #e74c3c;
}ライブデモ
実務での使いどころ
-
テキスト選択色のブランドカスタマイズ
テキスト選択時のハイライトカラーをブランドカラーに合わせ、サイト全体のデザインの一貫性を向上させます。
注意点
- ::selectionで使用できるCSSプロパティは限定的で、color、background-color、text-shadow、text-decorationなどに限られます。
アクセシビリティ
- 選択テキストの色と背景色のコントラスト比が十分であることを確認し、選択状態が視覚的に識別できるようにしてください。