Revision Content

{{ CSSRef() }}

Summary

The ::first-lineCSSpseudo-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.

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:

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

/* change the letters of the first line of every paragraph to uppercase */
p:first-line { text-transform: uppercase }

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>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,</li> <li>the {{ cssxref("color") }} property,</li> <li>all background-related properties,</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>
<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>