diff options
Diffstat (limited to 'files/es/web/css/_colon_any/index.html')
| -rw-r--r-- | files/es/web/css/_colon_any/index.html | 187 |
1 files changed, 0 insertions, 187 deletions
diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html deleted file mode 100644 index 7fe55d57c4..0000000000 --- a/files/es/web/css/_colon_any/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-Clase CSS - - Referencia -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Summary" name="Summary">Resumen</h2> - -<p>La <a href="/es/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-clase</a> <code>:any()</code> permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.</p> - -<div class="note"><strong>Nota:</strong> Esta pseudo-clase está en progreso de ser estandarizada en <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>Selectores CSS Nivel 4</em></a> bajo el nombre <code>:matches()</code>. Es probable que la sintaxis y el nombre de <code>:-<em>vendor</em>-any()</code> sean cambiados para reflejar el estándar en el futuro próximo.</div> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h3 id="Values" name="Values">Valores</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>Un selector. Puede ser un selector simple o un selector múltiple, comprendido de <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">selectores simples de CSS 3</a>, y puede incluir el combinador descendiente.</dd> -</dl> - -<div class="note"><strong>Nota:</strong> Los selectores pueden <strong>no</strong> contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.</div> - -<h2 id="Examples" name="Examples">Ejemplos</h2> - -<p>Por ejemplo, el siguiente CSS:</p> - -<pre class="brush: css">/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>Puede ser reemplazado con:</p> - -<pre class="brush: css">/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>Sin embargo, no se debe usar lo siguiente: (Véase <a href="#Issues_with_performance_and_specificity">la sección de rendimiento</a> abajo.)</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>Esto es particularmente útil al tratar con <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">secciones y encabezados</a> de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar <code>:any()</code>.</p> - -<p>Por ejemplo, sin <code>:any()</code>, estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:</p> - -<pre class="brush: css">/* Nivel 0 */ -h1 { - font-size: 30px; -} -/* Nivel 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Nivelo 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Level 3 */ -/* ... ni siquiera lo pienses*/ -</pre> - -<p>Usando <code>:-any()</code>, en cambio, es mucho más fácil:</p> - -<pre class="brush: css">/* Nivel 0 */ -h1 { - font-size: 30px; -} -/* Nivel 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -/* Nivel 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} -/* Nivel 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problemas con rendimiento y especificidad</h3> - -<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> sigue un problema con Gecko donde la especificidad de <code>:-moz-any()</code> es incorrecta. La implementación hasta Firefox 12 pone a <code>:-moz-any()</code> en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.</p> - -<p>Por ejemplo</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>es más lento que:</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>y lo siguiente es rápido:</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> - <td>12.0 (534.30){{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> |