CSS 擬似要素

1. 擬似要素とは？

CSS の擬似要素（Pseudo-elements）は、要素の特定のパーツにスタイルを適用するために使用されます。

例えば、以下のようなケースで利用されます：

• 要素の最初の行や最初の文字をスタイリングする
• 要素のコンテンツの前後にコンテンツを挿入する

2. 構文 (Syntax)

擬似要素のセレクタの書き方は以下の通りです：

セレクタ::擬似要素 {
  プロパティ: 値;
}

       Note: CSS3 では、擬似クラス（Pseudo-classes）と擬似要素を区別するために、擬似要素には二重コロン（::）を使用することが推奨されています。

3. ::first-line 擬似要素

::first-line 擬似要素は、テキストの最初の行に特別なスタイルを適用するために使用されます。

以下の例では、すべての <p> 要素の最初の行のテキストをフォーマットしています：

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

       注意：::first-line 擬似要素は、ブロックレベル要素（Block-level elements）にのみ適用可能です。

4. ::first-letter 擬似要素

::first-letter 擬似要素は、テキストの最初の文字に特別なスタイルを適用するために使用されます。

以下の例では、すべての <p> 要素の最初の文字を大きくし、色を変更しています：

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

       注意：::first-letter 擬似要素は、ブロックレベル要素にのみ適用可能です。

5. 擬似要素と HTML クラスの組み合わせ

擬似要素は HTML のクラス（Class）と組み合わせて使用することができます。

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

上記の例は、class="intro" が指定されたパラグラフの最初の文字にのみスタイルが適用されます。

6. 複数の擬似要素の組み合わせ

複数の擬似要素を組み合わせて、要素に複数のスタイルを適用することも可能です。

以下の例では、パラグラフの最初の文字を赤色でサイズを xx-large にし、残りの最初の行を青色で small-caps にしています。残りのテキストはデフォルトのスタイルで表示されます。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

7. ::before 擬似要素

::before 擬似要素は、要素のコンテンツの前に新しいコンテンツを挿入するために使用されます。

以下の例では、各 <h1> 要素の前に画像（アイコンなど）を挿入しています：

h1::before {
  content: url(smiley.gif);
}

8. ::after 擬似要素

::after 擬似要素は、要素のコンテンツの後ろに新しいコンテンツを挿入するために使用されます。

以下の例では、各 <h1> 要素の後ろに画像を挿入しています：

h1::after {
  content: url(smiley.gif);
}

9. ::marker 擬似要素

::marker 擬似要素は、リスト項目のマーカー（箇条書きのドットや番号）をターゲットにします。

以下の例では、リスト項目のマーカーを赤色にスタイリングしています：

::marker {
  color: red;
  font-size: 23px;
}

10. ::selection 擬似要素

::selection 擬似要素は、ユーザーがマウスなどでドラッグして選択した部分のスタイルを定義します。

以下のプロパティが ::selection に適用可能です：color、background、cursor、outline。

以下の例では、選択されたテキストを黄色い背景に赤色の文字として表示させます：

::selection {
  color: red;
  background: yellow;
}

11. すべての CSS 擬似要素の一覧