::first-letter (:first-letter)

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

El pseudo-elemento ::first-letter aplica estilos a la primera letra de la primera línea un elemento de bloque, sólo cuando no es precedido de otro contenido (como imágenes o tablas).

/* Selecciona la primera letra de <p> */
p::first-letter {
  font-size: 130%;
}

La primera letra de un elemento no es siempre fácil de identificar:

  • La puntuación que precede o sigue inmediatamente a la primera letra se incluye. La puntuación incluyo cualquier caracter Unicode definido on las clases open (Ps), close (Pe), initial quote (Pi), final quote (Pf), y other punctuation (Po).
  • Algunos idiomas tienen dígrafos que siempre se capitalizan juntos, como el IJ en holandés. En estos casos, ambas letras del dígrafo deben coincidir con el pseudo-elemento ::first-letter. (Esto pobremente implementado en los navegadores; consulte la tabla de compatibilidad).
  • La combinación del pseudoelemento ::before y la propiedad content podría inyectar texto al inico del elemento. En dicho caso, ::first-letter se aplicaría a la primera letra de este contenido generado.

CSS3 introdujo la notación::first-letter (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan:first-letter, introducido en CSS2.

Propiedades permitidas

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-letter:

Sintaxis

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

Ejemplo

Hace que la primera letra de cada párrafo sea roja y grande.

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.</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.</p>
<p>-El comienzo es un signo de puntuación especial.</p>
<p>_El comienzo es un signo de puntuación especial.</p>
<p>"El comienzo es un signo de puntuación especial.</p>
<p>'El comienzo es un signo de puntuación especial.</p>
<p>*El comienzo es un signo de puntuación especial.</p>
<p>#El comienzo es un signo de puntuación especial.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

CSS

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

Result

Especificaciones

Specification Status Comment
CSS Pseudo-Elements Level 4
La definición de '::first-letter' en esta especificación.
Working Draft Generaliza propiedades permitidas, opacity, and box-shadow.
CSS Text Decoration Module Level 3
La definición de 'text-shadow with ::first-letter' en esta especificación.
Candidate Recommendation Permite el uso de text-shadow con ::first-letter.
Selectors Level 3
La definición de '::first-letter' en esta especificación.
Recommendation Introducción de la sintaxis de doble dos puntos. Definición de casos particulares, como con idiomas específicos (ej., el dígrafo holandés IJ).
CSS Level 2 (Revision 1)
La definición de '::first-letter' en esta especificación.
Recommendation Sin cambios.
CSS Level 1
La definición de '::first-letter' en esta especificación.
Recommendation Definición inicial, uso de la sintaxis de doble dos puntos.

Compatibilidad

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
::first-letterChrome Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Firefox Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
IE Soporte completo 9
Soporte completo 9
Soporte completo 5.5
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Opera Soporte completo 7
Soporte completo 7
Soporte completo 3.5
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Safari Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
WebView Android Soporte completo 37
Soporte completo 37
Soporte completo 37
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Chrome Android Soporte completo 18
Soporte completo 18
Soporte completo 18
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Firefox Android Soporte completo 4
Soporte completo 4
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Opera Android Soporte completo 10.1
Soporte completo 10.1
Soporte completo 10.1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Safari iOS Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Samsung Internet Android Soporte completo 1.0
Soporte completo 1.0
Soporte completo 1.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-letter
Support for the Dutch digraph IJChrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 92176.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 92176.
Opera Android ? Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.
Usa un nombre no estandar.
Usa un nombre no estandar.

Ver También