mozilla

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

  • Revision slug: CSS/::first-letter
  • Revision title: ::first-letter (:first-letter)
  • Revision id: 35625
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 28 words added

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) classes, preceding or immediately following the first letter is also matched by this pseudo-element.

Similarly some languages have digraphs that are always capitalized together, like the IJ in Dutch. In these rare cases, both letters of the digraph should be matched by the ::first-letter pseudo-element. (This is poorly supported by browsers, watch the browser compatibility table)

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, list-item or table-caption. In all other cases, ::first-letter 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-letter pseudo-element:

  • All font properties : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}.
  • All background properties : {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, and {{ Cssxref("background-attachment") }}.
  • All margin properties: {{ Cssxref("margin }}"), {{ Cssxref("margin-top }}"), {{ Cssxref("margin-right }}"), {{ Cssxref("margin-bottom }}"), {{ Cssxref("margin-left }}").
  • All padding properties: {{ Cssxref("padding") }}, {{ Cssxref("padding-top }}"), {{ Cssxref("padding-right }}"), {{ Cssxref("padding-bottom }}"), {{ Cssxref("padding-left }}").
  • All border properties: the shorthands {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }} and the longhands properties.
  • The {{ cssxref("color") }} property.
  • The {{ 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) CSS properties.

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.

If legacy browsers must be supported, :first-letter is the only viable choice; if not, ::first-letter be must preferred.

Examples

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

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

Specifications

Specification Status Comment
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }} Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph IJ)
CSS 2.1 {{ Spec2('CSS2.1') }} The initial CSS Level 2 used the one-colon syntax.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 9.0 7.0 1.0 (85)
Old one-colon syntax (:first-line) 1.0 {{ CompatGeckoDesktop("1") }} 5.5 3.5 1.0 (85)
Support for the Dutch digraph IJ {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Old one-colon syntax (:first-line) {{ CompatUnknown() }} {{ CompatGeckoMobile("1") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{CompatUnknown()}
Support for the Dutch digraph IJ {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

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) classes, preceding or immediately following the first letter is also matched by this pseudo-element.</p>
<p>Similarly some languages have digraphs that are always capitalized together, like the <code>IJ</code> in Dutch. In these rare cases, both letters of the digraph should be matched by the <code>::first-letter</code> pseudo-element. (This is poorly supported by browsers, watch the <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">browser compatibility table</a>)</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>, <code>list-item</code> or <code>table-caption</code>. In all other cases, <code>::first-letter</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-letter</code> pseudo-element:</p>
<ul> <li>All font 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 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: {{ Cssxref("<span class="lang lang-*">margin }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("<span class="lang lang-*">margin-top }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("<span class="lang lang-*">margin-right }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("<span class="lang lang-*">margin-bottom }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("<span class="lang lang-*">margin-left }}</span>")</span>.</li> <li>All padding properties: {{ Cssxref("padding") }}<span class="lang lang-*">, </span>{{ Cssxref("padding<span class="lang lang-*">-top }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("padding<span class="lang lang-*">-right }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("padding<span class="lang lang-*">-bottom }}</span>")</span><span class="lang lang-*">, </span>{{ Cssxref("padding<span class="lang lang-*">-left }}</span>")</span>.</li> <li>All border properties: the shorthands {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }} and the longhands properties.</li> <li>The {{ cssxref("color") }} property.</li> <li>The {{ cssxref("text-decoration") }}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (only if <code>float</code> is <code>none</code>) CSS properties.</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> If legacy browsers must be supported, <code>:first-letter</code> is the only viable choice; if not, <code>::first-letter</code> be must preferred.</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>
<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://www.w3.org/TR/css3-selectors/#first-letter" title="http://www.w3.org/TR/css3-selectors/#first-letter">CSS Selectors Level 3</a></td> <td>{{ Spec2('CSS3 Selectors') }}</td> <td>Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph <code>IJ</code>)</td> </tr> <tr> <td><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</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>The initial CSS Level 2 used the one-colon syntax.</td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>9.0 <a class="external" href="http://msdn.microsoft.com/en-us/library/ie/ms530753%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms530753%28v=vs.85%29.aspx"></a></td> <td>7.0</td> <td>1.0 (85)</td> </tr> <tr> <td>Old one-colon syntax (<code>:first-line</code>)</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>5.5</td> <td>3.5</td> <td>1.0 (85)</td> </tr> <tr> <td>Support for the Dutch digraph <code>IJ</code></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=92176" title="https://bugzilla.mozilla.org/show_bug.cgi?id=92176"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> <tr> <td>Old one-colon syntax (<code>:first-line</code>)</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{CompatUnknown()}</td> </tr> <tr> <td>Support for the Dutch digraph <code>IJ</code></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=92176" title="https://bugzilla.mozilla.org/show_bug.cgi?id=92176"></a></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
Revert to this revision