From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../web/css/_doublecolon_first-letter/index.html | 135 +++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 files/es/web/css/_doublecolon_first-letter/index.html (limited to 'files/es/web/css/_doublecolon_first-letter') diff --git a/files/es/web/css/_doublecolon_first-letter/index.html b/files/es/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..3e243869b6 --- /dev/null +++ b/files/es/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,135 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

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:

+ + + +
+

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

+ +
{{csssyntax}}
+ +

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

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Permite el uso de {{cssxref("text-shadow")}} con ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}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).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Sin cambios.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Definición inicial, uso de la sintaxis de doble dos puntos.
+ +

Compatibilidad

+ +
+ + +

{{Compat("css.selectors.first-letter")}}

+
+ +

Ver También

+ + -- cgit v1.2.3-54-g00ecf