Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    ::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
    基本サポート ? ? ? ? ? ?

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

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