CSS 疑似要素セレクター

CSS 疑似要素（Pseudo-elements）セレクターを使用すると、ドキュメントツリーには存在しない特定の部分や、通常のセレクターではアクセスできない部分を選択してスタイルを適用できます。

これらは本質的に「抽象的な要素」を作成するものであり、HTML構造を変更することなく、要素の特定のコンテンツや位置を精緻に制御することを可能にします。

1. 疑似要素とは何か？

疑似要素はDOMツリー内の実際の要素ではなく、CSSエンジンがレンダリング時に「仮想的」に作り出すものです。これらは特殊な構文で識別され、通常は二重コロン（::）で始まります（CSS3以降の推奨）。ただし、CSS2の名残で単一コロン（:）も使用可能です。二重コロンの目的は「疑似クラス」と「疑似要素」を区別することにありますが、現代のブラウザはどちらの構文でも正しく認識します。

疑似要素は主に以下のような目的で使用されます：

• 要素のコンテンツの前後に生成されたコンテンツを挿入する。
• テキストの最初の文字や最初の行に特殊なスタイルを適用する。
• 要素の選択された部分の背景や色を変更する。

2. よく使われる疑似要素

CSSには多様な疑似要素が用意されており、それぞれ特定の用途があります。ここでは、特に頻用される強力な疑似要素を紹介します。

2.1 ::before と ::after

::before と ::after は、ターゲットとなる要素のコンテンツエリアの内部（ただし、その子要素の外側）に、生成されたコンテンツを挿入するために使用されます。挿入される内容はテキスト、画像、アイコンなどで、content プロパティで定義します。

構文:

selector::before {
    content: "テキスト内容";
    /* その他のスタイルプロパティ */
}

selector::after {
    content: url("image.png");
    /* その他のスタイルプロパティ */
}

ユースケース:

• 装飾的なアイコンや記号: リンク、リスト項目、または見出しの横に小さなアイコンを追加します。

.item::before {
    content: "⭐ ";
    color: gold;
}

• 浮動の解除 (clearfix): 親要素の内部に不可視の「クリア用」要素を追加することで、フロートレイアウトの問題を解決します。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

• 動的コンテンツの挿入: データや特定のステータスに基づいてテキストを挿入します。

.status-new::after {
    content: " (新着!)";
    color: red;
    font-weight: bold;
}

• 幾何学図形やボーダーエフェクト:content を空にし、display: block と position: absolute を組み合わせることで、多様な視覚効果を作成します。

.button {
    position: relative;
    padding: 10px 20px;
    border: 1px solid #ccc;
}

.button::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid blue;
    opacity: 0;
    transition: opacity 0.3s;
}

.button:hover::before {
    opacity: 1;
}

この例では、ホバー時に ::before で作成した青いボーダーが徐々に表示されるシンプルなエフェクトを実装しています。

2.2 ::first-letter

::first-letter 疑似要素は、ブロックレベル要素のテキストの最初の文字を選択し、特殊なスタイルを適用します。

構文:

selector::first-letter {
    /* スタイルプロパティ */
}

ユースケース:

• ドロップキャップ (drop cap): 雑誌や新聞のレイアウトでよく見られる、記事の最初の文字を大きく強調する手法です。

p::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: #333;
    float: left; /* 下沈効果を実現 */
    margin-right: 0.1em;
    line-height: 1;
}

2.3 ::first-line

::first-line は、ブロックレベル要素のテキストの「最初の1行」を選択します。1行の長さはビューポートの幅やフォントサイズによって動的に変化することに注意してください。

構文:

selector::first-line {
    /* スタイルプロパティ */
}

ユースケース:

• 冒頭の強調: 記事や段落の最初の1行に異なるフォント、色、背景を設定します。

article p::first-line {
    font-weight: bold;
    color: #0056b3;
}

2.4 ::selection

::selection は、ユーザーがマウスなどでハイライト（選択）したテキスト部分のスタイルを設定します。

構文:

::selection {
    /* スタイルプロパティ */
}

ユースケース:

• ブランディング: 選択時の色をサイトのブランドカラーと一致させます。

::selection {
    background-color: #ffcc00; /* 黄色の背景 */
    color: #333;             /* 濃い色のテキスト */
}

2.5 ::marker

::marker は、リスト項目（<li>など）のマーカーボックス（箇条書きのドット、数字、アルファベットなど）を選択します。

構文:

::marker {
    /* スタイルプロパティ */
}

ユースケース:

• リストマーカーのカスタマイズ: マーカーの色、サイズ、さらには内容を変更します。

li::marker {
    color: purple;
    font-size: 1.2em;
    content: "➤ "; /* マーカーの内容を変更可能 */
}

デフォルトマーカーの非表示:::before などで独自マーカーを作る際、デフォルトのものを消去します。

ul.custom-list li::marker {
    content: none; /* デフォルトを隠す */
}

3. 疑似要素と疑似クラスの違い

これら2つの違いを正しく理解することは極めて重要です：

• 疑似要素 (Pseudo-elements): 要素の特定の「部分」を選択・装飾するために使用されます。これらはDOMツリーに実在せず、CSSによって生成・抽象化されたものです。通常は :: で始まります（例：::before, ::after）。
• 疑似クラス (Pseudo-classes): 要素の状態、DOM内の位置、または他の要素との関係に基づいて動的にスタイルを変更するために使用されます。通常は : で始まります（例：:hover, :nth-child）。

モダンな開発プラクティスでは、これらを明確に区別するために二重コロンの使用が推奨されています。

4. 疑似要素のカスケードと優先順位

疑似要素のスタイルも、CSSのカスケード（滝状の適用）と優先順位（詳細度）の計算に含まれます。疑似要素セレクターの優先順位は、通常、通常の要素セレクターと同じです。

/* 優先順位が低い */
p::first-letter {
    color: blue;
}

/* 優先順位が高い（より具体的） */
.intro-paragraph::first-letter {
    color: red;
}

5. 疑似要素の制限事項

疑似要素は非常に強力ですが、いくつか注意すべき制限があります：

• すべてのCSSプロパティが適用できるわけではない: ::first-letter や ::first-line に適用できるプロパティは制限されています。
• content プロパティの必須性: ::before と ::after は、値が空文字列（content: "";）であっても content プロパティを含めないとレンダリングされません。
• JavaScriptによる直接操作の不可: 疑似要素はDOMの一部ではないため、document.querySelector('p::before') のように直接取得することはできません。変更するには、親要素のクラスやデータ属性を介して間接的に操作する必要があります。
• アクセシビリティの考慮: content プロパティで挿入された内容は、スクリーンリーダーに正しく解釈されない場合があります。重要な情報はHTML内に直接記述すべきです。

6. まとめ

CSS疑似要素セレクターは、HTML構造を汚さずにページ内容を精緻にデザインするための、柔軟かつ強力な機能です。::before や ::after による装飾、::first-letter によるタイポグラフィの向上、::selection によるUXの改善など、モダンWeb制作において不可欠な役割を担っています。これらをマスターすることで、コードをシンプルに保ちつつ、クリエイティブなインターフェースを構築できるようになります。

7. 附録：常用 CSS 疑似要素リスト