::first-line (:first-line)

  • Revision slug: CSS/::first-line
  • Revision title: ::first-line (:first-line)
  • Revision id: 38643
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 110 words added, 122 words removed

Revision Content

{{ CSSRef() }}

Summary

The ::first-line CSS pseudo-element applies styles only to the first line of a element. However, the selector ::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 not to use any other properties inside the declaration block, in order to keep the CSS future-proof.

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

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

As some browsers still doesn't support the two-colon syntax, Web developers should still use the CSS 2 syntax.

Examples

 

<style type="text/css"></style>
p::first-line { text-decoration: 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.

Specifications

Specification Status Comment
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }} The definition of what is the first line of an element has been reworded
CSS Level 2 (Revision 1) {{ Spec2('CSS2') }} The initial CSS Level 2 used the one-colon syntax.

Browser compatibility

Browser Lowest version Support of
Internet Explorer 5.5 :first-line
Firefox (Gecko) 1.0 (1.0) :first-line
1.0 (1.5) :first-line | ::first-line
Opera 3.5 :first-line
7.0 :first-line | ::first-line
Safari (WebKit) 1.0 (85) :first-line | ::first-line

For compatibility with IE 5.5-8 avoid CSS3 notation ::first-line (use CSS2 notation :first-line).

Revision Source

<p>{{ CSSRef() }}</p>
<h2>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. However, the selector <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 not to 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 one single colon character. As pseudo-classes were also following the same convention, they were indistinguable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, a pseudo-class still being prefixed with one single colon.<br> <br> As several browsers already implemented the CSS 2 version in a production server, all browsers supporting the two-colon syntax also supports the old one-colon syntax.<br> <br> As some browsers still doesn't support the two-colon syntax, Web developers should still use the CSS 2 syntax.</div>
<h2>Examples</h2>
<p>  </p><style type="text/css"><![CDATA[.example p::first-line {text-transform:uppercase}
.example2 p::first-line{margin-left:20px}
				
	]]></style>

<table class="standard-table"> <thead> </thead> <tbody> <tr style="background-color: rgb(238, 238, 238);"> <td colspan="2"><code>p::first-line { text-decoration: 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,  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> </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>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/selectors3/#first-line" title="http://dev.w3.org/csswg/selectors3/#first-line">CSS Selectors Level 3</a></td> <td>{{ Spec2('CSS3 Selectors') }}</td> <td>The definition of what is the first line of an element has been reworded</td> </tr> <tr> <td>CSS Level 2 (Revision 1)</td> <td>{{ Spec2('CSS2') }}</td> <td>The initial CSS Level 2 used the one-colon syntax.</td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>5.5</td> <td><code>:first-line</code></td> </tr> <tr> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:first-line</code></td> </tr> <tr> <td>1.0 (1.5)</td> <td><code>:first-line | ::first-line</code></td> </tr> <tr> <td rowspan="2">Opera</td> <td>3.5</td> <td><code>:first-line</code></td> </tr> <tr> <td>7.0</td> <td><code>:first-line | ::first-line</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td><code>:first-line | ::first-line</code></td> </tr> </tbody>
</table>
<p>For compatibility with IE 5.5-8 avoid CSS3 notation<code> ::first-line </code>(use CSS2 notation<code> :first-line</code>).</p>
Revert to this revision