概要

::selection CSS 擬似要素は、ユーザーが (マウスなどで) ハイライトした文書部分にスタイルを適用します。

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

次の CSS プロパティのごく一部のみが ::selection 疑似要素で使用できます:

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

構文

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

::selection

HTML

<div>This text has special styles when you highlight it.</div>
<p>Also try selecting text in this paragraph.</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 の定義
草案 初期の定義

Note: Though ::selection は CSS Selectors Level 3 の草案に含まれていましたが、その動作が不十分で (特にネストされた要素で) あり、相互運用性が達成されなかったため(W3C Style メーリングリストで議論されています)、勧告候補の段階で削除されました。::selection 疑似要素は、Pseudo-Elements Level 4 で復活しました。

ブラウザー互換性

注: text-shadow での ::selection は、Chrome、Safari、Firefox 17+ でサポートされます。

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1 (有) 1.0 -moz[1] 9 9.5 1.1
機能 Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? (有) ? ? ? ?

[1] Gecko は現在、接頭辞付きのバージョン ::moz-selection のみをサポートしています。バグ 509958 で接頭辞を外す議論がされています。

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

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