CSS ::first-line

::first-lineとは、ブロックレベル要素の最初の行にスタイルを適用するCSS擬似要素である。

書式

指定した要素タイプの最初の行

element::first-line {
  /* properties */
}

指定した要素タイプのうち、指定したクラスを持つ要素の最初の行

element.class::first-line {
  /* properties */
}

指定したクラスを持つ要素の最初の行

.class::first-line {
  /* properties */
}

指定したIDの要素の最初の行

#id::first-line {
  /* properties */
}

最初の子要素の最初の行

element:first-child::first-line {
  /* properties */
}

※疑似クラス（:first-child）と疑似要素（::first-line）を併用するには、疑似クラスを先に指定する。

適用できるプロパティ

CSS3の仕様では、::first-line擬似要素に次のプロパティを適用できる。

ウェブブラウザによっては、::first-line擬似要素に上記以外のプロパティも適用できる。

要素

要素の最初の行にスタイルを適用する。

<head>
  <style>
    .blockquote::first-line {
      color: red;
    }
  </style>
</head>
<body>
  <blockquote>
    うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。
    このじいさんはたしかに前の前の駅から乗ったいなか者である。
    発車まぎわに頓狂な声を出して駆け込んで来て、
    いきなり肌をぬいだと思ったら背中にお灸のあとがいっぱいあったので、
    三四郎の記憶に残っている。
  </blockquote>
</body>

上記のHTMLは次のように表示される。

うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。このじいさんはたしかに前の前の駅から乗ったいなか者である。発車まぎわに頓狂な声を出して駆け込んで来て、いきなり肌をぬいだと思ったら背中にお灸のあとがいっぱいあったので、三四郎の記憶に残っている。

クラス

クラスを指定した要素の最初の行にスタイルを適用する。

<head>
  <style>
    .foo::first-line {
      color: red;
    }
  </style>
</head>
<body>
  <p class="foo">
    吾輩は猫である。名前はまだ無い。
    どこで生れたかとんと見当がつかぬ。
    何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
    吾輩はここで始めて人間というものを見た。
    しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
    この書生というのは時々我々を捕つかまえて煮にて食うという話である。
    しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
  </p>
</body>

上記のHTMLは次のように表示される。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

::first-line 疑似要素を指定した要素に子要素があって場合も、最初の行に当たる部分にスタイルが適用される。

<head>
  <style>
    .foo::first-line {
      color: red;
    }
  </style>
</head>
<body>
  <div class="foo">
    <p>吾輩は猫である。名前はまだ無い。</p>
    <p>どこで生れたかとんと見当がつかぬ。</p>
    <p>何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
  </div>
</body>

上記のHTMLは次のように表示される。

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

ID

IDを指定した要素の最初の行にスタイルを適用する。

<head>
  <style>
    #bar::first-line {
      color: red;
    }
  </style>
</head>
<body>
  <p id="bar">
    私はその人を常に先生と呼んでいた。
    だからここでもただ先生と書くだけで本名は打ち明けない。
    これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。
    私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。
    筆を執っても心持は同じ事である。
    よそよそしい頭文字などはとても使う気にならない。
  </p>
</body>

上記のHTMLは次のように表示される。

私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。

疑似要素

CSSには first-line の他にも、次に示す疑似要素がある。

参考文献

World Wide Web Consortium (2018) Selectors Level 3