diff --git a/files/es/web/css/_colon_is/index.md b/files/es/web/css/_colon_is/index.md index a29528e21ce0c5..c0673d65dc546c 100644 --- a/files/es/web/css/_colon_is/index.md +++ b/files/es/web/css/_colon_is/index.md @@ -1,33 +1,55 @@ --- -title: ":any" +title: ":is()" slug: Web/CSS/:is +l10n: + sourceCommit: ac2874857a3de0be38430e58068597edf0afa2b2 --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -## Resumen +La función [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) de [CSS](/es/docs/Web/CSS) **`:is()`** toma una lista de selectores como argumento y selecciona cualquier elemento que pueda ser seleccionado por uno de los selectores en esa lista. Esto es útil para escribir selectores grandes en una forma más compacta. -La [pseudo-clase](/es/docs/CSS/Pseudo-classes) `:any()` 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. +> **Nota:** Originalmente llamado `:matches()` (y `:any()`), este selector pasó a llamarse `:is()` en [CSSWG número 3258](https://github.com/w3c/csswg-drafts/issues/3258). -> **Nota:** Esta pseudo-clase está en progreso de ser estandarizada en [_Selectores CSS Nivel 4_](http://dev.w3.org/csswg/selectors4/#matches) bajo el nombre `:matches()`. Es probable que la sintaxis y el nombre de `:-vendor-any()` sean cambiados para reflejar el estándar en el futuro próximo. +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}} -## Sintaxis +Los pseudoelementos no son válidos en la lista de selección para `:is()`. + +### Diferencia entre :is() y :where() -{{csssyntax}} +La diferencia entre los dos es que `:is()` cuenta para la especificidad del selector general (toma la especificidad de su argumento más específico), mientras que [`:where()`](/es/docs/Web/CSS/:where) tiene un valor de especificidad de 0. Esto se demuestra con el [ejemplo en la página de referencia `:where()`](/es/docs/Web/CSS/:where#examples). -### Valores +### Análisis de selector permisivo -- `selector` - - : Un selector. Puede ser un selector simple o un selector múltiple, comprendido de [selectores simples de CSS 3](http://www.w3.org/TR/css3-selectors/#simple-selectors), y puede incluir el combinador descendiente. +La especificación define que `:is()` y `:where()` aceptan una [lista de selectores permisivos](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list). -> **Nota:** Los selectores pueden **no** contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes. +En CSS, cuando se utiliza una lista de selectores, si alguno de los selectores no es válido, toda la lista se considera inválida. Cuando se utiliza `:is()` o `:where()` en lugar de que toda la lista de selectores se considere inválida si uno falla al analizar, el selector incorrecto o no compatible se ignorará y se utilizarán los demás. + +```css +:is(:valid, :unsupported) { + /* … */ +} +``` + +Seguirá analizando correctamente y haciendo coincidir `:valid` incluso en navegadores que no soportan `:unsupported`, mientras que: + +```css +:valid, +:unsupported { + /* … */ +} +``` + +Se ignorará en navegadores que no admitan `:unsupported` incluso si admiten `:valid`. ## Ejemplos -Por ejemplo, el siguiente CSS: +### Simplificando selectores de listas + +La pseudoclase `:is()` puede simplificar enormemente sus selectores CSS. Por ejemplo, tome el siguiente CSS: ```css -/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */ +/* Las listas desordenadas de 3 (o más) niveles usan una viñeta cuadrada */ ol ol ul, ol ul ul, ol menu ul, @@ -80,38 +102,27 @@ dir dir dir { } ``` -Puede ser reemplazado con: - -```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; -} -``` - -Sin embargo, no se debe usar lo siguiente: (Véase [la sección de rendimiento](#Issues_with_performance_and_specificity) abajo.) +Puedes reemplazarlo con: ```css -:-moz-any(ol, ul, menu, dir) - :-moz-any(ol, ul, menu, dir) - :-moz-any(ul, menu, dir) { +/* Las listas desordenadas de 3 (o más) niveles usan una viñeta cuadrada */ +:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) { list-style-type: square; } ``` -## Notas +### Simplificando selectores de secciones -Esto es particularmente útil al tratar con [secciones y encabezados](/es/docs/Sections_and_Outlines_of_an_HTML5_document) de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar `:any()`. +La pseudoclase `:is()` es particularmente útil cuando se trata de [secciones y encabezados](/es/docs/Web/HTML/Element/Heading_Elements) HTML. Dado que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} y {{HTMLElement("nav")}} comúnmente están anidados juntos, sin `:is()`, diseñarlos para que coincidan entre sí puede ser complicado. -Por ejemplo, sin `:any()`, estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado: +Por ejemplo, sin `:is()`, diseñar todos los elementos {{HTMLElement("Heading_Elements", "h1")}} en diferentes niveles podría ser muy complicado: ```css /* Nivel 0 */ h1 { font-size: 30px; } + /* Nivel 1 */ section h1, article h1, @@ -119,7 +130,8 @@ aside h1, nav h1 { font-size: 25px; } -/* Nivelo 2 */ + +/* Nivel 2 */ section section h1, section article h1, section aside h1, @@ -138,11 +150,12 @@ nav aside h1, nav nav h1 { font-size: 20px; } -/* Level 3 */ -/* ... ni siquiera lo pienses*/ + +/* Nivel 3 */ +/* ¡ni lo pienses! */ ``` -Usando `:-any()`, en cambio, es mucho más fácil: +Sin embargo, usar `:is()` es mucho más fácil: ```css /* Nivel 0 */ @@ -150,48 +163,54 @@ h1 { font-size: 30px; } /* Nivel 1 */ -:-moz-any(section, article, aside, nav) h1 { +:is(section, article, aside, nav) h1 { font-size: 25px; } /* Nivel 2 */ -:-moz-any(section, article, aside, nav) - :-moz-any(section, article, aside, nav) - h1 { +:is(section, article, aside, nav) :is(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) +:is(section, article, aside, nav) + :is(section, article, aside, nav) + :is(section, article, aside, nav) h1 { font-size: 15px; } ``` -### Problemas con rendimiento y especificidad +### :is() no selecciona pseudoelementos -[Bug 561154](https://bugzilla.mozilla.org/show_bug.cgi?id=561154) sigue un problema con Gecko donde la especificidad de `:-moz-any()` es incorrecta. La implementación hasta Firefox 12 pone a `:-moz-any()` 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. +La pseudoclase `:is()` no funciona con los pseudoelementos. Entonces en lugar de esto: -Por ejemplo +```css example-bad +some-element:is(::before, ::after) { + display: block; +} +``` -```css -.a> : -moz-any(.b, .c) { +o esto: + +```css example-bad +:is(some-element::before, some-element::after) { + display: block; } ``` -es más lento que: +en su lugar haz: -```css -.a > .b, -.a > .c { +```css example-good +some-element::before, +some-element::after { + display: block; } ``` -y lo siguiente es rápido: +## Sintaxis -```css -:-moz-any(.a, .d) > .b, -:-moz-any(.a, .d) > .c { +```css-nolint +:is() { + /* ... */ } ``` @@ -202,3 +221,9 @@ y lo siguiente es rápido: ## Compatibilidad con navegadores {{Compat}} + +## Véase también + +- {{CSSxRef(":where", ":where()")}} - Como `:is()`, pero con 0 [especificidad](/es/docs/Web/CSS/Specificity). +- [Lista de selección](/es/docs/Web/CSS/Selector_list) +- [Componentes web](/es/docs/Web/API/Web_components)