【CSS】テキストを選択した時の背景や文字色を変更する方法

カーソルで文字を選択した時、なにも指定しないと青い背景で白文字になるけど、サイトのカラーに合わないなぁと思ったら変えよう！
ページ全体を同じ感じにするときは、CSSで「::selection」の中に選択した時のスタイルを記述します。

// サイト全体に指定する時
::selection {
  background: #34ffd0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
// 個別に指定する時
.demo p::selection {
  background: #34ffd0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

では、まずデモの確認を。
デモ内の文字をカーソルで選択すると変化します。

デモ

デモで選択時に背景画像を引いて読みづらいの作ってみようと思ったらできませんでした。
CSSだけで色々やろうと思うとやっぱり無理があるみたい。

合わせてチェックしてね！

疑似クラスで最初、最後、n番目や奇数、偶数を指定｜CSSホバーで変化するテキストの作り方｜CSS【jQuery】選択した場所の「値」取得方法