::first-letter (:first-letter)
==============================

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).


```css
/\* 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.

**Nota:** 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`:

* Todas las propiedades de fuente: `font`, `font-style`, `font-feature-settings` (en-US), `font-kerning` (en-US), `font-language-override`, `font-stretch` (en-US), `font-synthesis` (en-US), `font-variant`, `font-variant-alternates`, `font-variant-caps` (en-US), `font-variant-east-asian` (en-US), `font-variant-ligatures` (en-US), `font-variant-numeric` (en-US), `font-variant-position` (en-US), `font-weight`, `font-size`, `font-size-adjust`, `line-height` and `font-family`
* Todas las propiedades de fondo: `background`, `background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* Todas las propiedades de márgenes: `margin`, `margin-top` (en-US), `margin-right`, `margin-bottom`, `margin-left` (en-US)
* Todas las propiedades de relleno: `padding`, `padding-top`, `padding-right` (en-US), `padding-bottom`, `padding-left` (en-US)
* Todas las propiedades de bordes: `border`, `border-style`, `border-color`, `border-width`, `border-radius` (en-US), `border-image`
* La propiedad `color`
* Las propiedades `text-decoration`, `text-shadow`, `text-transform`, `letter-spacing` (en-US), `word-spacing` (en-US) (when appropriate), `line-height`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, `box-shadow`, `float`, `vertical-align` (sólo si `float` es `none`)
Sintaxis
--------

Error: could not find syntax for this itemEjemplo
-------

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

### HTML


```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


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

### Result

Especificaciones
----------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver También
-----------

* `::first-line`