mozilla

Revision 38642 of ::first-line (:first-line)

  • Revision slug: CSS/::first-line
  • Revision title: ::first-line (:first-line)
  • Revision id: 38642
  • Created:
  • Creator: brianloveswords
  • Is current revision? No
  • Comment 35 words added, 24 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

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

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

 

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   

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

Change the letters of the first line of every paragraph to uppercase

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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>
<pre class="brush: css">/* change the letters of the first line of every paragraph to uppercase */

p::first-line { text-transform: uppercase }
</pre>
<p>  </p>&lt;style type="text/css"&gt;<!--[CDATA[p::first-line {text-transform:uppercase}
				
	]]-->&lt;/style&gt;

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<table border="1" cellpadding="1" cellspacing="1" style="table-layout: fixed; width: 100%;"> <thead> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> </thead> <tbody> <tr> <td> <p><code>p::first-line { text-transform: uppercase }</code></p> </td> <td> <p>Change the letters of the first line of every paragraph to uppercase</p> </td> </tr> <tr> <td> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </td> <td> </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