diff options
Diffstat (limited to 'files/es/web/css/_colon_is/index.html')
| -rw-r--r-- | files/es/web/css/_colon_is/index.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/files/es/web/css/_colon_is/index.html b/files/es/web/css/_colon_is/index.html new file mode 100644 index 0000000000..7fe55d57c4 --- /dev/null +++ b/files/es/web/css/_colon_is/index.html @@ -0,0 +1,187 @@ +--- +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> |