テキスト選択色を変更する

2019年4月3日

この記事は約 3 分で読めます。

4.5

CSS の ::selection疑似要素は、
ユーザーが (テキストをマウスでクリックやドラッグすることで)
選択した文書の一部にスタイルを適用します。

1. CSS Syntax
2. Example
3. Browser Support
4. Specifications

CSS Syntax

バージョン 61 以前の Firefoxには
「-moz」のベンダープレフィックスを
つけたものが必要となります。

/* 従来の Firefox の構文 (バージョン 61 以前) */
::-moz-selection

::selection

Example

/* 選択されたテキストを赤の背景に金色とする */
::selection {
  color: gold;
  background: red;
} 

/* 選択されたテキストを青の背景に白とする */
p::selection {
  color: white;
  background: blue;
}

結果は、こちらから

::selection - CSS: カスケーディングスタイルシート | MDN

CSS の ::selection 疑似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択 ...

https://developer.mozilla.org/ja/docs/Web/CSS/::selection

Browser Support

Can I Use css-selection? Data on support for the css-selection feature across the major browsers from caniuse.com.

Specifications

メモ: ::selection は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 振る舞いの仕様化が途中であることや相互運用性が確保されなかったこと (W3C Style mailing list での議論に基づく) から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。
::selection – CSS: カスケーディングスタイルシート | MDN – Mozilla

勧告の過程で削除されたけど、
再導入されたという事らしいです。

ところで、
「W3C」とか「勧告」ってなに？

W3C(ダブリュースリーシー)とは
「World Wide Web Consortium」の略称で、
Web技術の国際的な標準規格化を推進する標準化団体の名称
だそうです。

わたしのリスペクトする
WEMO.tech さんが詳しく解説しています。

W3C勧告とは？
W3Cが作成する技術文書にはその成熟までにいくつかの段階があり、技術に関するテストやレビュー、仕様変更を重ね、長い時間をかけて文書の内容を改良していきます。
そうした長いプロセスの最終段階のことを、W3Cでは「勧告」と呼んでおり、「W3C勧告された」というのはつまり、その技術に関するテストが全て終わり、「国際的に十分な信頼性があると認められた技術文書が完成した」ということです。
そして、「国際的に十分な信頼性がある技術文書が存在する」ということはつまり、その技術が「国際的に標準化された技術」と認められたということになるのです。
W3C勧告とはなんぞ？Web標準化とW3Cにおける勧告プロセス …