::selection

概要

::selectionは、ユーザーがマウスドラッグやキーボード操作で選択したテキストのスタイルをカスタマイズする擬似要素です。color、background-color、text-decorationなどの限られたプロパティを設定できます。ブランドカラーに合わせたテキスト選択の配色変更やデザインの統一感向上に活用されます。

対応ブラウザ

基本構文

::selection {
  background-color: #3498db;
  color: white;
}
p::selection {
  background-color: #e74c3c;
}

実務での使いどころ

• テキスト選択色のブランドカスタマイズ

  テキスト選択時のハイライトカラーをブランドカラーに合わせ、サイト全体のデザインの一貫性を向上させます。

注意点

アクセシビリティ

• 選択テキストの色と背景色のコントラスト比が十分であることを確認し、選択状態が視覚的に識別できるようにしてください。

参考リンク

• MDN Web Docs — ::selection
• Can I use — ::selection