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

最終更新日:2020年03月18日  (初回投稿日:2020年03月18日)

テキスト選択時のハイライトなどを、::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プロパティを使ってみよう。
ボックス内のテキストがオーバーフローして(はみ出て)いる時、「まだ続きがある」という意味でボックス内の行末に「...」を付けたりできます。これは知ってると便利!

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2020/06 | 07
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.