::selection

非標準

概要

CSS の ::selection 擬似要素は、文書内でユーザがハイライトした部分(マウスやその他のポインティングデバイスで選んだ部分)にルールを適用します。

セレクタに ::selection を使ったルールでは、小さな CSS のサブセットしか使えません: colorbackgroundbackground-colortext-shadow。特に、他のプロパティと同じように、background-image は無視される点に注意してください。

::selection での text-shadow の利用が Chrome、Safariと、Firefox 17 以降でサポートされています。

この 擬似要素は CSS Selectors Level 3 の草案には記載されていましたが、特に入れ子の要素での動作の定義が不十分に見え、相互互換性が実現できなかったため、勧告候補の段階で取り除かれました(W3C Style のメーリングリスト上の議論による)。

::selection 擬似要素は現在、標準路線上のどの CSS モジュールにも存在しません。製品の環境で使うべきではありません。

Gecko だけはプレフィックスが必要です。CSS は不正な擬似要素を見つけるとそのルールを丸ごと捨ててしまうので、2 つのルールを分けて書かなくてはなりません: ::-moz-selection と、::selection {...} です。Gecko 以外のブラウザでは ::-moz-selection は不正なので、このルールは捨てられます。

/* draw any selected text yellow on red background */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

仕様

CSS の ::selection 擬似要素は CSS Selectors Level 3 用に草案が作られましたが、勧告候補に達する前に取り除かれました。それにも関わらず、いくつかのブラウザはこの機能を実装していますが、おそらく実験的機能としてサポートは続くでしょう。

今のところ、::selection 擬似要素は標準路線上のどの仕様書にもありません。

ブラウザ実装状況

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

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す