トップページの中の セレクタの中の :first-line疑似要素 (E:first-line)

:first-line疑似要素 (E:first-line)

  • 最終更新:2009年7月 7日 13:19

CSS1で定義された:first-line疑似要素は、指定した要素の一行目のテキストに適用するセレクタです。
そのため、ウェブページの幅や文字サイズによって一行目の長さや文字数が変わる点に注意してください。また、ブロックレベル要素にだけ適用されます。

この:first-line疑似要素は、適用されるプロパティが決まっており、それらのプロパティは、font関連、color、background関連、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、text-shadow、clearとなっています。
尚、適用されるプロパティは決まっていますが、仕様書のUAs may apply other properties as well.の一文から「UA(ブラウザなど)によって他のプロパティも適用できるかも」となっているため、他のプロパティが使えるブラウザも有るかもしれません。

とはいえ、どのブラウザで適用出来るかも分からない、決められていないプロパティを指定するのは、あまりオススメできません。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

:first-line疑似要素のサンプル

p.pick:first-line {
  color: #633;
  font-size: 125%;
}
<p class="pick">
むか~しむかし、、、(略)
</p>

一行目だけ文字を大きくして、色を変えています。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

むか~しむかし、有るところに、おじいちゃんとおばあちゃんが住んでおりました。おじいちゃんはいつものように川に洗濯に行き、おばあちゃんは、山に狩りに出かけました。おじいちゃんの洗濯テクニックはすごく、一日に数千人分の洗濯が可能という噂ですが、そんなに人が住んでいないのでその真相を確かめる術はありませんが、いつも洗濯ついでに魚を捕ってきます。おばあちゃんの狩りの腕もすさまじく、見付けた獲物は逃した事が無いそうな。熊でも猪でも、男でもその圧倒的な美しさとスタイルの前にひれ伏してしまうそうです。
そんな老夫婦には、息子もおり・・・続く!

文字サイズを変更してみたりすると、一行目辺りの文字数が変わって適用される文字が変わるのが分かると思います。
にしても、イマイチいけてるサンプルが浮かばなかった...それだけ実用させるのが難しいセレクタなのかもしれません。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ