（ちょっとメモ）テキスト選択時のハイライトを変える ::selection

テキスト選択時のハイライトなどを、::selection 疑似要素 で変更することができます。
ちなみに、この段落のハイライトカラーを変えています。テキストを選択してみてください。

今回はこの ::selection 疑似要素を使った小ネタをメモっておきます。

本日のINDEX

1. ハイライト疑似要素（highlight pseudo-elements）
   1. ハイライト疑似要素で使える CSSプロパティ
2. ::selection を使ったサンプル

参考：
・CSS Pseudo-Elements Module Level 4 | W3C Editor's Draft
・::selection | MDN

ハイライト疑似要素（highlight pseudo-elements）

ハイライト疑似要素（highlight pseudo-elements）には、以下のものがあります。

::selection

ユーザがテキストを選択してハイライトした部分をセレクターにします。
これはアクティブな部分の選択（テキストフィールド内とか）にも適用されます。
（::inactive-selection は、非アクティブな部分でのテキスト選択に適用されます）

::spelling-error

ブラウザがスペルエラーとしたテキスト部分をセレクターにします。

::grammar-error

ブラウザが文法エラーとした部分をセレクターにします。

この中で、ブラウザが実装しているのは、今のところ ::selection だけ。これは IE9 から使えます。iOS Safari と Opera Mini は未対応です。
古い Firefox（ver.61まで）はベンダープレフィックス -moz- が必要です。
（参考：Can I Use　2020年3月記）

ハイライト疑似要素で使える CSSプロパティ

ハイライト疑似要素では、以下のプロパティのみ適用されます。

・color
・background-color
・cursor
・caret-color
・outline 関連のプロパティ
・text-decoration 関連のプロパティ
・text-emphasis-color
・text-shadow

今のところ、どのブラウザも使えるのは「color（文字色）」と「background-color（背景色）」だけみたい。（Firefox では「text-shadow」も使えました）

::selection を使ったサンプル

::selection 疑似要素を使ったサンプルです。

テキストを選択してください。ここも選択してください。 テキストエリア

これは↓何も指定していないテキストエリアです。
テキストエリア

サンプルのHTMLはこちら。

<p class="mihon">テキストを選択してください。<b>ここも選択</b>してください。
<textarea>テキストエリア</textarea></p>

サンプルのCSSはこちら。一応 古いFirefox用の -moz- も書いています。

.mihon textarea {display:block;margin:.5em 0;padding:.5em;border:1px solid currentcolor}
.mihon textarea:active, .mihon textarea:focus {outline:none}
.mihon::-moz-selection {color:white; background:#008000}
.mihon::selection {color:white; background:#008000}
.mihon > b::-moz-selection {color:red; background:yellow}
.mihon > b::selection {color:red; background:yellow}
.mihon textarea::-moz-selection {background:gold; text-shadow:2px 2px 2px #C00; caret-color:red}
.mihon textarea::selection {background:gold; text-shadow:2px 2px 2px #C00; caret-color:red}

Firefox（Mac）でのプレビューです↓

疑似要素は「1つのセレクターに1つだけ」というルールがあります。
そして「,（カンマ）」で区切ったセレクタの連結はできません。
例えば、上のサンプルの ::-moz-selection（古いFirefox用）の指定を、下記のように書いても、適用されません。

 /*「,」によるセレクタの連結は不可*/ 
.mihon::-moz-selection, .mihon::selection {color:red; background:yellow} 

内容が同じでも、2行に分けて書く必要があります。

 /*これが正しい書き方*/ 
.mihon::-moz-selection {color:red; background:yellow} 
.mihon::selection {color:red; background:yellow} 

次回予告

次回は、text-overflowプロパティを使ってみよう。
ボックス内のテキストがオーバーフローして（はみ出て）いる時、「まだ続きがある」という意味でボックス内の行末に「...」を付けたりできます。これは知ってると便利！