---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
translation_of: 'Web/CSS/::first-letter'
---
<p>{{ CSSRef() }}</p>

<h2 id="概要">概要</h2>

<p><code>::first-letter</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/Pseudo-elements" title="Pseudo-elements">虛擬元素</a>選取了一個區塊第一行的第一個字母，如果那一行前面沒有其他內容（例如圖片或是行內表格）。</p>

<p>The first letter of an element is not necessarily trivial to identify:</p>

<ul>
 <li>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.</li>
 <li>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, check the <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">browser compatibility table</a>).</li>
 <li>Finally, a combination of the {{ cssxref("::before") }} pseudo-element and the {{ cssxref("content") }} property may inject some text at the beginning of the element. In that case, <code>::first-letter</code> will match the first letter of this generated content.</li>
</ul>

<p>A first line has meaning only 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 an effect only 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-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}.</li>
 <li>All background properties : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}.</li>
 <li>All margin properties: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
 <li>All padding properties: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
 <li>All border properties: the shorthands {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, and the longhands properties.</li>
 <li>The {{ cssxref("color") }} property.</li>
 <li>The {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ 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 that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.</p>

<div class="note">
<p>In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.</p>

<p>As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.</p>

<p>If legacy browsers must be supported, <code>:first-letter</code> is the only viable choice; if not, <code>::first-letter</code> is preferred.</p>
</div>

<h2 id="Example" name="Example">Example</h2>

<p>Make the first letter of every paragraph red and big.</p>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&lt;/p&gt;
&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
  nulla facilisi.&lt;/p&gt;
&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css">p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
  color: red;
  font-size: 130%;
}</pre>

<h3 id="Output">Output</h3>

<p>{{ EmbedLiveSample('Example', 679, 390) }}</p>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">規範</th>
   <th scope="col">狀態</th>
   <th scope="col">註解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Generalized allowed properties to typesetting, text decoration and inline layout properties, {{ cssxref("opacity") }} and {{ cssxref("box-shadow") }}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
   <td>Allowed the usage of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</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>). The two-colon syntax for pseudo-elements has been introduced.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>No significant change, though CSS Level 2 still used the one-colon syntax.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>The initial definition used the one-colon syntax.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</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</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td>Old one-colon syntax (<code>:first-letter</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() }} {{ bug("92176") }} </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-letter</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() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="參見">參見</h2>

<ul>
 <li>{{cssxref("::first-line")}} 虛擬元素。</li>
</ul>