mozilla

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

  • Revision slug: CSS/::first-letter
  • Revision title: ::first-letter (:first-letter)
  • Revision id: 35606
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 169 words added, 19 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.

Specifications

Examples

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

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

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>
<p> </p>
<h3>Summary</h3>
<p>The<code> :first-letter </code>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.</p>
<h3>Specifications</h3>
<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" rel="external nofollow" target="_blank" title="http://www.w3.org/TR/css3-selectors/#first-letter">CSS 3 Selectors #first-letter</a> Working draft</li>
</ul>
<h3>Examples</h3>
<pre>/* make the first letter of every paragraph red and big */

p:first-letter  { color: red;  font-size: 130%; }</pre>
<h3>Browser compatibility</h3>
<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