セレクタで::selectionを使うとテキスト選択時のcssを変更することができる。
▼通常の選択色
デフォルトでは薄い青色が指定されている。
![]() |
|---|
::selectionを使う
▼selection適用例
![]() |
|---|
▼画面全体に適用する場合
.css
::selection{処理}セレクタに擬似要素::selectionのみ記述すると、デフォルトの指定を変更することができる。
▼指定した要素に適用する場合
.css
要素::selection{処理}実例
.html
Lorem ipsum dolor sit amet,
<div>
consectetur adipisicing elit,
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Ut enim ad minim veniam,
<pclass="fifth">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ...</p></div>.css
::selection{background:cornsilk;}p::selection{background:coral;color:white;}.fifth::selection{background:yellow;color:black;}
