initial commit

1 files changed, 135 insertions, 0 deletions

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'
+---
+<div>{{CSSRef}}</div>
+
+<p>El <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elemento</a> <strong><code>::first-letter</code></strong> aplica estilos a la primera letra de la primera línea un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">elemento de bloque</a>, sólo cuando no es precedido de otro contenido (como imágenes o tablas).</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selecciona la primera letra de &lt;p&gt; */
+p::first-letter {
+  font-size: 130%;
+}</pre>
+
+<p>La primera letra de un elemento no es siempre fácil de identificar:</p>
+
+<ul>
+ <li>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 <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), y <em>other punctuation</em> (Po).</li>
+ <li>Algunos idiomas tienen dígrafos que siempre se capitalizan juntos, como el <code>IJ</code> en holandés. En estos casos, ambas letras del dígrafo deben coincidir con el pseudo-elemento <code>::first-letter</code>. (Esto pobremente implementado en los navegadores; consulte la tabla de compatibilidad).</li>
+ <li>La combinación del pseudoelemento {{ cssxref("::before") }} y la propiedad {{ cssxref("content") }} podría inyectar texto al inico del elemento. En dicho caso, <code>::first-letter</code> se aplicaría a la primera letra de este contenido generado.</li>
+</ul>
+
+<div class="note">
+<p>CSS3 introdujo la notación<code>::first-letter</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noopener">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elementos</a>. Los navegadores también aceptan<code>:first-letter</code>, introducido en CSS2.</p>
+</div>
+
+<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
+
+<p>Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento <code>::first-letter</code>:</p>
+
+<ul>
+ <li>Todas las propiedades de fuente: {{ 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") }} and {{ Cssxref("font-family") }}</li>
+ <li>Todas las propiedades de fondo: {{ 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") }}, and {{cssxref("background-blend-mode")}}</li>
+ <li>Todas las propiedades de márgenes: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
+ <li>Todas las propiedades de relleno: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
+ <li>Todas las propiedades de bordes: {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}</li>
+ <li>La propiedad {{ cssxref("color") }}</li>
+ <li>Las propiedades {{ 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") }} (sólo si <code>float</code> es <code>none</code>)</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Hace que la primera letra de cada párrafo sea roja y grande.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&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;-El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;_El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;"El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;'El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;*El comienzo es un signo de puntuación especial.&lt;/p&gt;
+&lt;p&gt;#El comienzo es un signo de puntuación especial.&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 notranslate">p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ 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>Permite el uso de {{cssxref("text-shadow")}} con <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>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 <code>IJ</code>).</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Sin cambios.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición inicial, uso de la sintaxis de doble dos puntos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.first-letter")}}</p>
+</div>
+
+<h2 id="Ver_También">Ver También</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>