::selection疑似要素 CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説

2024.09.13
スポンサーリンク

::selectionは、ユーザーが選択したテキストにスタイルを適用できる疑似要素です。この疑似要素を使用することで、通常の選択時のハイライトスタイルを変更できます。

スポンサーリンク

::selectionの値とその効果の一覧

  • background-color: 選択時の背景色を指定します。
  • color: 選択時のテキスト色を指定します。
  • text-shadow: 選択時のテキストに影を追加できます。

注意点と関連情報

::selectionは、選択した範囲のスタイルを変更するために使用されますが、すべてのCSSプロパティが使用できるわけではありません。例えば、background-colorやcolor、text-shadowはサポートされていますが、borderやpaddingは適用されません。また、選択可能なテキストのみが対象となるため、画像やボックス要素などには効果がありません。

::selectionが効かない理由として考えられること

スタイルプロパティがサポートされていない

::selectionでは、一部のスタイルプロパティしか使用できません。例えば、background-colorやcolorはサポートされていますが、borderやbox-shadowなどは無効です。
対策：::selectionで使用できるプロパティ（例：color、background-color、text-shadow）のみを設定しているか確認します。

特定の要素に適用されていない

::selectionは一部のフォーム要素や特定のインタラクティブ要素には適用されないことがあります。例えば、<input>や<textarea>要素にはスタイルが適用されない場合があります。
対策：適用される要素が適切か確認し、インタラクティブな要素には他の方法でスタイルを指定することを検討します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.css-sample-box {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

::selectionで背景色を変更

テキストを選択した際に、背景色が黄色に変わるようにします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box selection-background">
    このテキストを選択すると、背景色が黄色に変わります。
  </div>
</div>

CSSコード

.selection-background::selection {
  background-color: yellow;
}

表示結果

このテキストを選択すると、背景色が黄色に変わります。

::selectionでテキスト色を変更

テキストを選択した際に、文字の色が赤に変わるようにします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box selection-text-color">
    このテキストを選択すると、文字の色が赤に変わります。
  </div>
</div>

CSSコード

.selection-text-color::selection {
  color: red;
}

表示結果

このテキストを選択すると、文字の色が赤に変わります。

::selectionで背景色とテキスト色を同時に変更

テキストを選択した際に、背景色が水色、文字の色が白に変わるようにします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-box selection-combo">
    このテキストを選択すると、背景色が水色、文字の色が白に変わります。
  </div>
</div>

CSSコード

.selection-combo::selection {
  background-color: lightblue;
  color: white;
}

表示結果

このテキストを選択すると、背景色が水色、文字の色が白に変わります。

まとめ

  • ::selectionは、ユーザーが選択したテキストにスタイルを適用する疑似要素です。
  • 背景色や文字色を変更でき、選択時の強調表示をカスタマイズできます。
  • 適用できるCSSプロパティには制限があり、background-colorやcolor、text-shadowなどが使用可能です。
スポンサーリンク