CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

CSSの疑似要素（pseudo-element）は、HTML要素に対してだけでなく、CSSクラスにも適用することができます。これにより、テキスト選択時の見た目変更など、より柔軟で細かいデザイン制御が可能になります。

本記事では、代表的な疑似要素である ::selection を例に、要素への適用とクラスとの組み合わせ方を具体的なサンプルコードとともに解説します。

サンプルコード

次の例では、CSSクラスに疑似要素を組み合わせて使用しています。カンマ区切りでセレクタを並列に記述することで、「特定クラスの子要素」と「各要素のテキスト選択時」に同じスタイルを一括適用しています。

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Elements and CSS Classes</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    line-height: .1em;
    border: 4px solid black;
}
::selection{
    color:white;
}
.child:nth-child(1), h1::selection{
    background-color: #FF8A00;
}
.child:nth-child(2), div::selection{
    background-color: #F44336;
}
.child:nth-child(3), p::selection{
    background-color: #C303C3;
}
.child:nth-child(4), article::selection{
    background-color: #4CAF50;
}
.child:nth-child(5), code::selection{
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Elements and CSS Classes</legend>
<div id="container">
<h1>A Heading</h1>
<div>Welcome to DIV World</div>
<p>Every one is welcome in this town. Make yourself comfertable</p>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</article>
<code>function helloWorld(){ document.write("Hello World");}</code>
<div><span class="child">h1</span><span class="child">div</span><span class="child">p</span><span class="child">article</span><span class="child">code</span></div>
</div>
</body></html>

実行結果

このコードを実行すると、以下のように表示されます。テキストをドラッグして選択すると、要素ごとに異なる背景色が適用されるのが確認できます。

初期レイアウト

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

<h1> 要素と <div> 要素を選択した場合

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

<p> 要素と <article> 要素を選択した場合

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

<code> 要素を選択した場合

CSS疑似要素をクラスにも適用する方法｜::selectionを使った実例解説

ポイント解説

  • ::selection：ユーザーがテキストをドラッグして選択した際に適用される疑似要素です。ここでは文字色を白（color: white）に統一しています。
  • .child:nth-child(n)：child クラスを持つ span 要素のうち、n番目の子要素にスタイルを適用します。
  • セレクタの併記：「.child:nth-child(1), h1::selection」のようにカンマで並べることで、複数のセレクターに同じ宣言ブロックを再利用でき、CSSの記述量を削減できます。

このように疑似要素は単体の要素だけでなく、クラスセレクターや :nth-child() などの疑似クラスと自由に組み合わせられるため、実践的なスタイリングの幅が大きく広がります。

  1. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {

  2. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方