MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

::first-letter (:first-letter)

This translation is incomplete. Please help translate this article from English.

Sumari

El pseudo-element CSS ::first-letter selecciona la primera lletra de la primera línia d'un bloc, si no està precedit per qualsevol altre tipus de contingut (com imatges o taules en línia) en la seva línia.

La primera lletra d'un element que no és necessàriament trivial per identificar:

  • Puntuació, és qualsevol caràcter definit en Unicode en open (Ps), close (Pe), initial quote (Pi), final quote (PF), other (PO) i altres classes de puntuació, abans o immediatament després de la primera lletre també es correspon per aquest pseudo-element.
  • De la mateixa manera alguns idiomes tenen dígrafs que sempre es capitalitzen en conjunt, com el IJ en holandès. En aquests casos rars, les dues lletres del dígraf han d'anar acompanyades del pseudo-element ::first-letter. (Això no funciona bé en els navegadors, consulteu la taula de compatibilitat del navegador).
  • Finalment, una combinació del pseudo-element ::before i la propietat content pot injectar una mica de text al principi de l'element. En aquest cas, ::first-letter coincidirà amb la primera lletra d'aquest contingut generat.

Una primera línia només té sentit en una caixa de bloc contenidor, per tant, el pseudo-element ::first-letter té un efecte només en elements amb un valor display de block, inline-block, table-cell, list-item o table-caption . En tots els altres casos, ::first-letter no té cap efecte.

Només un petit subconjunt de totes les propietats CSS es pot utilitzar dins d'un bloc de declaració d'un conjunt de regles CSS que conté un selector, usant el pseudo-element ::first-letter:

Ja que aquesta llista s'ampliarà en el futur, es recomana que no s'utilitzi altres propietats dins del bloc de declaració, per tal de mantenir el CSS a prova de futur.

En CSS 2, els pseudo-elements van ser precedits d'un sol caràcter de dos punts. Com en les pseudo-classes també estaven seguint la mateixa convenció, eren indistingibles. Per solucionar això, CSS 2.1 va canviar la convenció dels pseudo-elements. Ara, un pseudo-element és precedit per dos caràcters de dos punts, i una pseudo-classe encara es prefixa amb un sol caràcter de dos punts.

Com diversos navegadors ja implementen la versió CSS 2 en una versió de llançament, tots els navegadors que suporten la sintaxi de dos punts també són compatibles amb l'antiga sintaxi d'un sol caràcter de dos punts.

Si els navegadors antics han de ser compatibles, :first-letter és l'única opció viable; si no, es preferible ::first-letter.

Sintaxi

/* CSS3 syntax */
::first-letter { style properties }

/* CSS2 syntax */
:first-letter { style properties }

Exemple

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

Contingut HTML

<p>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.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>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.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

Contingut CSS

p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
  color: red;
  font-size: 130%;
}

Sortida

Especificacions

Especificació Estat Comentari
CSS Pseudo-Elements Level 4
The definition of '::first-letter' in that specification.
Working Draft Propietats generals permeses per la composició tipogràfica, decoració de text i propietats de disseny en línia, opacity i box-shadow.
CSS Text Decoration Module Level 3
The definition of 'text-shadow with ::first-letter' in that specification.
Candidate Recommendation Permès lùs de text-shadow amb ::first-letter.
Selectors Level 3
The definition of '::first-letter' in that specification.
Recommendation Es defineix el comportament de casos concrets com elements de llista, o un comportament específic del llenguatge (com el Dutch digraph IJ). S'ha introduït la sintaxi de dos punts per als pseudo-elements.
CSS Level 2 (Revision 1)
The definition of '::first-letter' in that specification.
Recommendation Sense canvis significatius, tot i que en CSS Nivell 2 se segueix utilitzant la sintaxi d'un sol caràcter de dos punts.
CSS Level 1
The definition of '::first-letter' in that specification.
Recommendation La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Supor t bàsic 1.0 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85)
Antiga sintaxi d'un sol caràcter de dos punts (:first-letter) 1.0 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85)
Suport per el Dutch digraph IJ No support No support errada 92176  No support No support No support
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic ? 1.0 (1) No support ? ?
Antiga sintaxi d'un sol caràcter de dos punts (:first-letter) ? 1.0 (1) ? ? ?
Suport per el Dutch digraph IJ ? No support ? ? ?

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,