スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

選択したテキストにスタイルに適用する「::selection」

選択したテキストにスタイルを適用しているサイトを最近ちょくちょく見かけるので、このブログでもやってみました。ということでその方法を簡単に説明してみます。

selection-css.png

「::selection」というセレクタを使うことで選択したテキストにスタイルを適用することができます。

以前は現在策定中のCSS3セレクタの1つとして載せられていましたが、いつの間にか仕様から外れました。ですがIE以外でしたらちゃんと使えます。

基本的な使い方は以下のとおりです。

::selection {
	background:#ff0000;
	color:#ffffff;
}

::-moz-selection {
	background:#ff0000;
	color:#ffffff;
}

Firefox用に「-moz」のベンダープレフィックスをつけたものも必要となります。セレクタにベンダープレフィックスというのも珍しいですね。

あとフォントのサイズや太さは変えられなさそうです。

実装してみるとこんな感じになります。

sample
このテキストを選択すると、フォントの色が白に、背景が赤になります。

p要素にのみ適用させるには以下のようにします。Firefox用のコードは省略してます。

p::selection {
	background:#ff0000;
	color:#ffffff;
}

クラス名に「test」とついた要素にのみ適用させるには以下のようにします。

.test::selection {
	background:#ff0000;
	color:#ffffff;
}

ということで簡単に説明してみました。

ちょっとしたことですが遊び心があっていいのではないでしょうか?

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
いつも見させて頂いてます!

これ本当しりたかったです!ありがとうございます!

あとよろしかったら私のサイトにWebparkさんをLink&紹介させていただきたいのですが・・
よろしかったらお願いしますm(__)m

【2011/11/22 19:47】 | まさお #4B33lOYw | [edit]
まさおさん

おはようございます。
お役に立ててなによりです。

相互リンクはしていませんが、
リンクしていただくのは自由ですし、
紹介していただけるならありがたいです。

これからもよろしくお願いします!
【2011/11/25 07:55】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。