選択した部分の文字色・背景色を変更出来る疑似要素::selection【CSS】

今回は疑似要素の1つである::selectionを紹介します。
この疑似要素::selectionはクリックやドラッグした際に通常、背景色が青・文字色が白となるのを、指定の色や装飾を行う事が可能です。

::selectionの書き方と指定方法

まず最初に、::selectionの書き方と指定方法について解説していきます。
書き方は簡単で、下記のように::selectionの中に変更するプロパティを記述するだけとなります。

::selection {
    color: #FFF;
    background-color: black;
}

上記のように記述するだけでいいのでとても簡単です。
次に、指定方法について解説していきます。

ページ全体に指定する方法

ページ全体に指定するには、先ほど紹介した内容をそのまま記述する事でページ全体に適応されます。

::selection {
    color: #FFF;
    background-color: black;
}

一部の要素に指定する方法

こちらも指定方法は簡単で、適応させたい要素やクラス等に対して記述する事で可能となります。

p::selection {
    color: black;
    background-color: #E4E4E4;
}

上記のようにページ全体でも、一部の要素にでも適応させる事ができます。

利用できるプロパティはcolorやbackground-colorなど一部のプロパティとなります。
詳しくはMDNさんで紹介されていますのでご確認ください。

::selectionを使用した装飾例

::selectionを使用した装飾例としていくつか紹介します。

オーソドックスな背景色と文字色の変更

::selection {
    color: #FFF;
    background-color: #8FC051;
}

文字に影をつける

::selection {
    text-shadow: 0 0 5px #4D98BF;
}

立体的に表示

::selection {
    color: #FFF;
    background-color: #8FC051;
    text-shadow: 1px 1px 0 #000;
}

さいごに

いかがでしたでしょうか。
サイトのカラーに合わせた配色をする事で統一感を出せますのでせひ利用してみてください。