path: root/files/ca/web/css/_doublecolon_first-letter/index.html

---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
tags:
  - CSS
  - Layout
  - NeedsMobileBrowserCompatibility
  - Pseudo-element
  - Reference
  - Web
translation_of: 'Web/CSS/::first-letter'
---
<div>{{CSSRef}}</div>

<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong>code&gt;::first-letter</strong> aplica estils a la primera lletra de la primera línia d'un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">element de nivell de bloc</a>, però només quan no està precedit d'un altre contingut (com ara imatges o taules en línia).</p>

<pre class="brush: css no-line-numbers">/* <span class="short_text" id="result_box" lang="ca"><span>Selecciona la primera lletra d'un &lt;p&gt;</span></span> */
p::first-letter {
  font-size: 130%;
}</pre>

<p>La primera lletra d'un element no sempre és trivial per identificar:</p>

<ul>
 <li>La puntuació que precedeix o segueix immediatament a la primera lletra s'inclou en la coincidència. La puntuació inclou qualsevol caràcter Unicode definit en la classes <em>obertura</em> (Ps), <em>tancament</em> (Pe), <em>cita nicial</em> (Pi), <em>cita final</em> (Pf), i <em>altres punctuacions</em> (Po).</li>
 <li>Alguns idiomes tenen dígrafs que sempre es mostren en majúscules, com l' <code>IJ</code> en holandès. En aquests casos, ambdues lletres del dígraf haurien de coincidir amb el pseudo-element <code>::first-letter</code>. (Això és poc compatible amb els navegadors, consulteu la <a href="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">taula de compatibilitat del navegador</a> a continuació).</li>
 <li>Una combinació del pseudo-element {{ cssxref("::before") }} i la propietat {{ cssxref("content") }} poden injectar algun text al principi de l'element. En aquest cas, <code>::first-letter</code> coincideix amb la primera lletra d'aquest contingut generat.</li>
</ul>

<div class="note">
<p>CSS3 va introduir la notació de <code>::first-letter</code> ( amb dos caràcters de dos punts) per distingir les <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> dels <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>. Els navegadors també accepten <code>:first-letter</code>, introduït en CSS2.</p>
</div>

<h2 id="Propietats_permeses"><span id="result_box" lang="ca"><span>Propietats permeses</span></span></h2>

<p>Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element <code>::first-letter</code>:</p>

<ul>
 <li>Totes les propietats de font: {{ 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") }} i {{ Cssxref("font-family") }}.</li>
 <li>Totes les propietats de fons: {{ 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") }} i {{cssxref("background-blend-mode")}}.</li>
 <li>Totes les propietats de marge: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
 <li>Totes les propietats de farcit: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
 <li>Totes les propietats de vora: abreujades {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} i les propietats no abreujades.</li>
 <li>La propietat {{ cssxref("color") }}.</li>
 <li>Les propietats CSS {{ 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") }} (només si <code>float</code> és <code>none</code>).</li>
</ul>

<h2 id="Sintaxi">Sintaxi</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

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

<p>Fa que la primera lletra de cada paràgraf sigui en vermell i gran.</p>

<h3 id="HTML">HTML</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.&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.&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">CSS</h3>

<pre class="brush: css">p::first-letter {
  color: red;
  font-size: 130%;
}</pre>

<h3 id="Resultat">Resultat</h3>

<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Genera propietats permeses per a la composició de textos, decoració de text, propietats de disseny en línia, {{ cssxref("opacity") }} i {{ 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><span id="result_box" lang="ca"><span>Permet l'ús de</span></span> {{cssxref("text-shadow")}} amb <code>::first-letter</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Introducció de la sintaxi de dos caràcters de dos punts. Definició del comportament de casos limits, com ara en elements de llista o amb idiomes específics (p. ex., el dígraf holandès <code>IJ</code>).</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Cap canvi.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>9.0</td>
   <td>7.0</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td>Antiga sintaxis d'un caràcter de dos punts (<code>:first-letter</code>)</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>5.5</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>Suport per al dígraf holandès</span></span> <code>IJ</code></td>
   <td>{{ CompatNo() }}</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>Descripció</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("1") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Antiga sintaxis d'un caràcter de dos punts (<code>:first-letter</code>)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatGeckoMobile("1") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>Suport per al dígraf holandès</span></span> <code>IJ</code></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li>{{cssxref("::first-line")}}.</li>
</ul>