【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】選択した場所の「値」取得方法