疑似要素

5.1 基本的な疑似要素

CSSの疑似要素は、開発者が通常のセレクターでは選択できない文書の部分にスタイルとコンテンツを追加できるようにするものだよ。これらは"仮想"要素を作成し、HTMLマークアップの一部であるかのようにスタイルを適用できる。複雑なレイアウトを作成したり、ウェブページの見た目を改善するための強力なツールなんだ。

疑似要素とは何か

疑似要素はセレクターに追加されるキーワードで、特定の要素の部分をスタイルすることができる。これらはビジュアルな見た目の一部として仮想の要素を作成し、元のHTMLマークアップを変更しないで済む。疑似要素は通常、最初の文字やテキストの行、装飾要素の追加などのタスクに使用されるんだ。

主要な疑似要素

よく使われる疑似要素には以下のものがあるよ:

• ::before: 選択した要素の内容の前にコンテンツを追加
• ::after: 選択した要素の内容の後にコンテンツを追加
• ::first-letter: 要素の最初の文字のスタイル
• ::first-line: 要素の最初の行のスタイル
• ::selection: ユーザーが選択したテキストのスタイル

疑似要素の使い方

CSSの疑似要素はダブルコロン (::)で示されるけど、古いブラウザとの互換性のために一部の疑似要素はシングルコロン (:) 表記もサポートしているよ。

構文:

    
      selector::pseudo-element {
        property: value;
        property: value;
        property: value;
        ...
      }
    
  

5.2 疑似要素の使用例

1. 装飾的な要素の追加

疑似要素はよく要素の内容の前後に装飾的な要素を追加するために使われるよ:

    
      /* リンクテキストの前にアイコンを追加 */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* 段落の後に装飾的な要素を追加 */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

これらの例では、疑似要素::beforeと::afterを使って、リンクテキストの前にアイコンを追加し、段落の後に装飾的な要素を追加してるんだ。

2. 最初の文字と行のスタイル

疑似要素はテキストの最初の文字や最初の行をスタイルするためにも使えるよ。これらはしばしばタイポグラフィで利用されるよ:

    
      /* 段落の最初の文字のスタイル */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* 段落の最初の行のスタイル */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

これらの例では、疑似要素::first-letterと::first-lineを使って、段落の最初の文字と最初の行をスタイルしているよ。

3. テキストの選択

疑似要素::selectionは、ユーザーが選択したテキストのスタイルに使用されるよ:

    
      /* 選択されたテキストのスタイル */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

この例では、ユーザーが選択したテキストは青い背景と白いテキストの色になるよ。

5.3 疑似要素の特性と制限

制限:

• 一度だけの使用: 疑似要素::beforeと::afterは各要素に一度だけ使えるよ
• contentの要件: 疑似要素::beforeと::afterは、たとえ空でもcontentプロパティを使う必要があるよ
• ブラウザの互換性: 現代のブラウザは疑似要素を示すためにダブルコロンをサポートしてるけど、古い疑似要素ではシングルコロンも動作するよ

contentプロパティの使用例

    
      /* 装飾的な要素のための空の疑似要素の使用例 */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

この例では、空の疑似要素::beforeを使って、divの内容の前に装飾的なストライプを追加しているんだ。