Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- 【CSSセレクタ】E:first-letter
【CSSセレクタ】E:first-letter
『セレクタ:first-letter』で、要素の最初の行の最初の文字に適用でき、こちらは一般に『擬似要素』と呼ばれます。IE8以下のブラウザでは動きません。
注意点として、ブラウザにレンダリングされた後の最初の行の最初の文字に適用されるものとなり、ソースコード上の最初の行の最初の文字ではありません。そして最初の文字の前にimg要素などが存在している場合も反映されません。その他、この『:first-line』は『display』プロパティの値が『block』、『inline-block』、『table-cell』、『table-caption』等である場合のみ反映されますのでインライン要素などでは反映されません。ご注意ください。
サンプルコード
p:first-letter { color: red;} /* 最初の行の最初の文字を赤字にします。 */
ブラウザでの表示結果
p:first-letter { color: red;} /* 最初の行の最初の文字を赤字にします。 */
<p> 最初の行の最初の文字が赤字になります。 ソースコード上の<br>最初の行の最初の文字ではありませんのでご注意ください。 </p>
対応ブラウザ
IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
---|---|---|---|---|---|---|---|---|---|
iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
---|---|---|
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。