::first-line (:first-line)

  • Revision slug: CSS/::first-line
  • Revision title: ::first-line (:first-line)
  • Revision id: 294614
  • Created:
  • Creator: eliranmal
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The ::first-line CSS pseudo-element applies styles only to the first line of a element. The amount of the text on the first line depends of numerous factors, like the width of the elements or of the document, but also of the font size of the text. As all pseudo-elements, the selectors containing ::first-line does not match any real HTML element.

A first line has only meaning in a block-container box, therefore the ::first_line pseudo-element has only an effect on elements with a {{ cssxref("display") }} value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-line pseudo-element:

  • all font-related properties : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}
  • the {{ cssxref("color") }} property
  • all background-related properties : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, and {{ Cssxref("background-attachment") }}
  • {{ cssxref("word-spacing") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("text-decoration") }}, {{ cssxref("text-transform") }}, and {{ cssxref("line-height") }}.

As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.

In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.

As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.

If legacy browsers must be supported, :first-line is the only viable choice; if not, ::first-line is preferred.

Examples

<style type="text/css"></style>

p::first-line { text-transform: uppercase }
Change the letters of the first line of every paragraph to uppercase.
Live Example Reference Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

LOREM IPSUM DOLOR SIT AMET,  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

DUIS AUTE IRURE DOLOR IN reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

p::first-line { margin-left: 20px }
Does nothing, margin-left cannot be applied to a first-line pseudo-element.
Live Example Reference Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

p::first-line { text-indent: 20px }
Does nothing, text-indent cannot be applied to a first-line pseudo-element.
Live Example Reference Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }} {{ Spec2('CSS3 Selectors') }} The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.
{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }} {{ Spec2('CSS2.1') }} No significant change.
{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }} {{ Spec2('CSS1') }} The initial definition used the one-colon syntax.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 9.0 7.0 1.0 (85)
Old one-colon syntax (:first-line) 1.0 {{ CompatGeckoDesktop("1") }} 5.5 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Old one-colon syntax (:first-line) {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>::first-line</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">pseudo-element</a> applies styles only to the first line of a element. The amount of the text on the first line depends of numerous factors, like the width of the elements or of the document, but also of the font size of the text. As all pseudo-elements, the selectors containing <code>::first-line</code> does not match any real HTML element.</p>
<p>A first line has only meaning in a <a href="/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes" title="https://developer.mozilla.org/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-container box</a>, therefore the <code>::first_line</code> pseudo-element has only an effect on elements with a {{ cssxref("display") }} value of <code>block</code>, <code>inline-block</code>, <code>table-cell</code> or <code>table-caption</code>. In all other cases, <code>::first-line</code> has no effect.</p>
<p>Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the <code>::first-line</code> pseudo-element:</p>
<ul>
  <li>all font-related properties : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}</li>
  <li>the {{ cssxref("color") }} property</li>
  <li>all background-related properties : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, and {{ Cssxref("background-attachment") }}</li>
  <li>{{ cssxref("word-spacing") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("text-decoration") }}, {{ cssxref("text-transform") }}, and {{ cssxref("line-height") }}.</li>
</ul>
<p>As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.</p>
<div class="note">
  In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.<br />
  <br />
  As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.<br />
  <br />
  If legacy browsers must be supported, <code>:first-line</code> is the only viable choice; if not, <code>::first-line</code> is preferred.</div>
<h2 id="Examples">Examples</h2>
<p>&lt;style type="text/css"&gt;<!--[CDATA[.example p::first-line {text-transform:uppercase}
.example2 p::first-line{margin-left:20px}
.example3 p::first-line{text-indent:10px}
				
	
	
	
	
	]]-->&lt;/style&gt;</p>
<table class="standard-table">
  <thead>
  </thead>
  <tbody>
    <tr style="background-color: rgb(238, 238, 238);">
      <td colspan="2"><code>p::first-line { text-transform: uppercase }</code><br />
        Change the letters of the first line of every paragraph to uppercase.</td>
    </tr>
    <tr>
      <td class="example"><strong>Live Example</strong></td>
      <td><strong>Reference Result</strong></td>
    </tr>
    <tr>
      <td class="example">
        <div style="width: 20em;">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </td>
      <td>
        <div style="width: 20em;">
          <p>LOREM IPSUM DOLOR SIT AMET,&nbsp; consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          <p>DUIS AUTE IRURE DOLOR IN reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<table class="standard-table">
  <thead>
  </thead>
  <tbody>
    <tr style="background-color: rgb(238, 238, 238);">
      <td colspan="2"><code>p::first-line { margin-left: 20px }</code><br />
        Does nothing, <code>margin-left</code> cannot be applied to a first-line pseudo-element.</td>
    </tr>
    <tr>
      <td class="example"><strong>Live Example</strong></td>
      <td><strong>Reference Result</strong></td>
    </tr>
    <tr>
      <td class="example2">
        <div style="width: 20em;">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </td>
      <td>
        <div style="width: 20em;">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<table class="standard-table">
  <thead>
  </thead>
  <tbody>
    <tr style="background-color: rgb(238, 238, 238);">
      <td colspan="2"><code>p::first-line { text-indent: 20px }</code><br />
        Does nothing, <code>text-indent</code> cannot be applied to a first-line pseudo-element.</td>
    </tr>
    <tr>
      <td class="example"><strong>Live Example</strong></td>
      <td><strong>Reference Result</strong></td>
    </tr>
    <tr>
      <td class="example3">
        <div style="width: 20em;">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </td>
      <td>
        <div style="width: 20em;">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}</td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>No significant change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>The initial definition used the one-colon syntax.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>9.0</td>
        <td>7.0</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Old one-colon syntax (<code>:first-line</code>)</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>5.5</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Old one-colon syntax (<code>:first-line</code>)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
Revert to this revision