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

CSSの:first-line擬似要素の使い方｜段落の最初の行だけにスタイルを適用する方法

:first-line 擬似要素を使うと、セレクターで指定した要素のテキストの「最初の行」にだけ、特別なスタイルを適用できます。段落の冒頭を目立たせたい場合などに便利で、下線・文字色・フォントサイズなどの装飾を、最初の行に限定して変更できます。

使用例

次の例では、:first-line 擬似要素を使って、ドキュメント内の要素の最初の行に特殊な効果を加えています。p:first-line ルールですべての段落の最初の行に下線を引き、p.noline:first-line ルールで noline クラスを持つ段落の下線を解除しています。

<html>
   <head>
      <style>
         p:first-line {
            text-decoration: underline;
         }
         p.noline:first-line {
            text-decoration: none;
         }
      </style>
   </head>
   <body>
      <p class="noline">この行には下線が付きません。nolineクラスに属しているためです。</p>
      <p>この段落の最初の行は、上記のCSSルールで定義されたとおり下線が引かれます。それ以降の行は通常どおり表示されます。この例は、:first-line擬似要素を使って、任意のHTML要素の最初の行に効果を与える方法を示しています。</p>
   </body>
</html>

補足：::first-line との違いと注意点

CSS3以降では、擬似要素はコロンを2つ続ける構文（::first-line）で記述することが推奨されています。ただし、古いブラウザーとの互換性を保つため、従来どおりコロン1つの :first-line も広くサポートされています。

また、:first-line は p や div などのブロックレベル要素に対してのみ有効です。インライン要素には適用できない点に注意してください。

  1. CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説

    CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。 構文 要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。 element {    /*declarations*/ } サンプルコード1：リストとdiv要素への適用例 次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。 &l

  2. CSSの疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

    CSSの疑似要素（Pseudo-element）とは、要素の一部を指定してスタイルを適用するためのセレクターです。たとえば、テキストの最初の1文字や1行目など、通常のセレクターでは選択できない特定の部分をターゲットにできます。また、::before と ::after を使えば、要素の前後にコンテンツを挿入することも可能です。基本構文疑似要素は、セレクターに続けて「::」＋疑似要素名という形式で記述します。基本的な書き方は以下のとおりです。Selector::pseudo-element {    css-property: /*値*/; }サンプルコード①：カウンターを使