mozilla

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

  • Revision slug: CSS/::first-letter
  • Revision title: ::first-letter (:first-letter)
  • Revision id: 35611
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment page display name changed to '::first-letter (:first-letter)'

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.

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>
<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