mozilla

Revision 35614 of ::first-letter (:first-letter)

  • Revision slug: CSS/::first-letter
  • Revision title: ::first-letter (:first-letter)
  • Revision id: 35614
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 6 words added, 3 words removed

Revision Content

{{ CSSRef() }}

Summary

The :first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

Punctuation, that is any characters defined in Unicode in the open (Ps), close (Pe), initial quote (Pi), final quote (Pf) and other punctuation (Po) punctuation classes, preceding or immediately following the first letter is also selected by this pseudo-element.

A first line has only meaning in a block-container box, therefore the ::first_letter 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-letter has no effect.

 margin properties, padding properties, border properties, color property, background properties.

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-letter 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") }}
  • all background-related properties : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, and {{ Cssxref("background-attachment") }}
  • all margin properties:
  • all padding properties:
  • all border properties:
  • the {{ cssxref("color") }} property
  • {{ cssxref("text-decoration") }}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (only if float is none)

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.

Examples

/* make the first letter of every paragraph red and big */

p:first-letter { 
  color: red; 
  font-size: 130%; 
}

Specifications

Browser compatibility

CSS 3 introduced the ::first-letter notation in order to establish a discrimination between pseudo-classes and pseudo-elements. Don't use the double colon notation yet for compatibility with Internet Explorer.

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The<code> :first-letter </code><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">pseudo-element</a> selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.</p>
<p>Punctuation, that is any characters defined in Unicode in the <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf) and <em>other punctuation</em> (Po) punctuation classes, preceding or immediately following the first letter is also selected by this pseudo-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_letter</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-letter</code> has no effect.</p>
<p> margin properties, padding properties, border properties, color property, background properties.</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-letter</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>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>all margin properties:</li> <li>all padding properties:</li> <li>all border properties:</li> <li>the {{ cssxref("color") }} property</li> <li>{{ cssxref("text-decoration") }}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (only if float is none)</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.</div><h2>Examples</h2>
<pre class="brush: css">/* make the first letter of every paragraph red and big */

p:first-letter { 
  color: red; 
  font-size: 130%; 
}

</pre>
<h2>Specifications</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#first-letter" title="http://www.w3.org/TR/CSS21/selector.html#first-letter">CSS 2.1 Selectors #first-letter</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#first-letter" target="_blank" title="http://www.w3.org/TR/css3-selectors/#first-letter">CSS 3 Selectors #first-letter</a> Working draft</li>
</ul>
<h2>Browser compatibility</h2>
<p>CSS 3 introduced the<code> ::first-letter </code>notation in order to establish a discrimination between pseudo-classes and pseudo-elements. Don't use the double colon notation yet for compatibility with Internet Explorer.</p>
<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-letter</code></td> </tr> <tr style="border-top: 2px solid silver;"> <td rowspan="2">Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td><code>:first-letter</code></td> </tr> <tr> <td>1.0 (1.5)</td> <td><code>:first-letter | ::first-letter</code></td> </tr> <tr style="border-top: 2px solid silver;"> <td rowspan="2">Opera</td> <td>3.5</td> <td><code>:first-letter</code></td> </tr> <tr> <td>7.0</td> <td><code>:first-letter | ::first-letter</code></td> </tr> <tr style="border-top: 2px solid silver;"> <td>Safari (WebKit)</td> <td>1.0</td> <td><code>:first-letter | ::first-letter</code></td> </tr> </tbody>
</table>
Revert to this revision