::first-line (:first-line)

  • Revision slug: CSS/::first-line
  • Revision title: ::first-line (:first-line)
  • Revision id: 38634
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 59 words added

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 display value of block, inline-block, table-cell or a table-caption. In all other cases, ::first-line has no effect.

 

In CSS 2, pseudo-elements where 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

/* change the letters of the first line of every paragraph to uppercase */

p:first-line { text-transform: uppercase }

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 display value of <code>block</code>, <code>inline-block</code>, <code>table-cell</code> or a <code>table-caption</code>. In all other cases, <code>::first-line</code> has no effect.</p>
<p> </p>
<div class="note">In CSS 2, pseudo-elements where 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>
<pre>/* change the letters of the first line of every paragraph to uppercase */

p:first-line { text-transform: uppercase }
</pre>
<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