` (la sombra host en esta instancia) en el documento.
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{ SpecName('CSS Scope', '#host-selector', ':host') }} | {{ Spec2('CSS Scope') }} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+Compatible con Chrome y Safari.
+
+{{Compat("css.selectors.host")}}
+
+## Ver también
+
+- [Componentes Web](/es/docs/Web/Web_Components)
+- {{cssxref(":host()")}}
+- {{cssxref(":host-context()")}}
diff --git a/files/es/web/css/_colon_hover/index.html b/files/es/web/css/_colon_hover/index.html
deleted file mode 100644
index ed870f713930b5..00000000000000
--- a/files/es/web/css/_colon_hover/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: ':hover'
-slug: 'Web/CSS/:hover'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:hover'
----
-{{ CSSRef }}
-
-La pseudo-clase :hoverCSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).
-
-/* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" */
-a:hover {
- color: orange;
-}
-
-Los estilos definidos por la pseudoclase :active serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :hover después de las reglas :link y :visited, pero antes de :active, según lo definido por el orden LVHA : :link — :visited — :hover — :active.
-
-Nota : La pseudo-clase :hover es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase :hover podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades hovering limitadas o inexistentes.
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Ejemplo básico
-
-HTML
-
-<a href="#">Intenta pasar el mouse sobre este enlace.</a>
-
-CSS
-
-a {
- background-color: powderblue;
- transition: background-color .5s;
-}
-
-a:hover {
- background-color: gold;
-}
-
-Resultado
-
-{{EmbedLiveSample("Ejemplo_básico")}}
-
-Galería de imágenes
-
-Puede usar la pseudoclase :hover para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea esta demostración para una posible nota.
-
-Nota: Para un efecto análogo, pero basado en la pseudo-clase
:checked (aplicado a radioboxes ocultos), vea
esta demostración , tomada de la página de referencia
:checked .
Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}
- {{ Spec2('HTML WHATWG') }}
-
-
-
- {{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}
- {{ Spec2('CSS4 Selectors') }}
- Permite aplicar :hover a cualquier pseudo-elemento.
-
-
- {{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
- {{ Spec2('CSS3 Selectors') }}
- Ningún cambio significativo.
-
-
- {{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}
- {{ Spec2('CSS2.1') }}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.hover")}}
-
Ver también
-
-
diff --git a/files/es/web/css/_colon_hover/index.md b/files/es/web/css/_colon_hover/index.md
new file mode 100644
index 00000000000000..c4a139b1b5d762
--- /dev/null
+++ b/files/es/web/css/_colon_hover/index.md
@@ -0,0 +1,80 @@
+---
+title: ':hover'
+slug: Web/CSS/:hover
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:hover
+---
+{{ CSSRef }}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes "Pseudo-classes") **`:hover`** de [CSS](/es/docs/Web/CSS) coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).
+
+```css
+/* Selecciona cualquier elemento cuando está "mantenido (hovered)" */
+a:hover {
+ color: orange;
+}
+```
+
+Los estilos definidos por la pseudoclase `:active` serán anulados por cualquier pseudo-clase posterior relacionada con el _enlace_ ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla `:hover` después de las reglas `:link` y `:visited`, pero antes de `:active`, según lo definido por el _orden LVHA_: `:link` — `:visited` — `:hover` — `:active`.
+
+> **Nota:** La pseudo-clase `:hover` es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase `:hover` podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades _hovering_ limitadas o inexistentes.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Ejemplo básico
+
+#### HTML
+
+```html
+ Intenta pasar el mouse sobre este enlace.
+```
+
+#### CSS
+
+```css
+a {
+ background-color: powderblue;
+ transition: background-color .5s;
+}
+
+a:hover {
+ background-color: gold;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample("Ejemplo_básico")}}
+
+### Galería de imágenes
+
+Puede usar la pseudoclase `:hover` para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea [esta demostración](/@api/deki/files/6247/=css-gallery.zip) para una posible nota.
+
+> **Nota:** Para un efecto análogo, pero basado en la pseudo-clase [`:checked`](/es/docs/Web/CSS/%3Achecked) (aplicado a radioboxes ocultos), vea [esta demostración](/@api/deki/files/6268/=css-checked-gallery.zip), tomada de la página de referencia [:checked](/es/docs/Web/CSS/:checked).
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }} | {{ Spec2('HTML WHATWG') }} | |
+| {{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }} | {{ Spec2('CSS4 Selectors') }} | Permite aplicar `:hover` a cualquier pseudo-elemento. |
+| {{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }} | {{ Spec2('CSS3 Selectors') }} | Ningún cambio significativo. |
+| {{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }} | {{ Spec2('CSS2.1') }} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.hover")}}
+
+## Ver también
+
+- [Chromium bug #370155: No ponga `:hover` sticky en los sitios que configuran una ventana gráfica móvil](https://code.google.com/p/chromium/issues/detail?id=370155)
+- [Chromium bug #306581: Inmediatamente muestra los estados hover y active al tocar cuando la página no se puede desplazar.](https://code.google.com/p/chromium/issues/detail?id=306581)
diff --git a/files/es/web/css/_colon_in-range/index.html b/files/es/web/css/_colon_in-range/index.html
deleted file mode 100644
index b34031d268897c..00000000000000
--- a/files/es/web/css/_colon_in-range/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: ':in-range'
-slug: 'Web/CSS/:in-range'
-tags:
- - CSS
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:in-range'
----
-{{CSSRef}}
-
-La pseudo-clase :in-rangeCSS representa un elemento {{htmlelement("input")}} cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.
-
-/* Selecciona cualquier <input>, pero solo cuando tiene un rango
- especificado, y su valor está dentro de ese rango */
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}
-
-Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está dentro de los límites permitidos.
-
-Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-
-
HTML
-
-
<form action="" id="form1">
- <ul>Los valores entre 1 y 10 son válidos.
- <li>
- <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
- <label for="value1">Tu valor esta </label>
- </li>
- </ul>
-</form>
-
-
CSS
-
-
li {
- list-style: none;
- margin-bottom: 1em;
-}
-
-input {
- border: 1px solid black;
-}
-
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}
-
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
- border: 2px solid red;
-}
-
-input:in-range + label::after {
- content: 'bien.';
-}
-
-input:out-of-range + label::after {
- content: 'fuera de rango!';
-}
-
-
Resultado
-
{{EmbedLiveSample('Ejemplo', 600, 140)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}
- {{Spec2('HTML WHATWG')}}
- Define cuándo :in-range coincide con elementos en HTML.
-
-
- {{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}
- {{Spec2('CSS4 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
-
{{Compat("css.selectors.in-range")}}
-
-
Ver también
-
-
diff --git a/files/es/web/css/_colon_in-range/index.md b/files/es/web/css/_colon_in-range/index.md
new file mode 100644
index 00000000000000..fb930f8617cb78
--- /dev/null
+++ b/files/es/web/css/_colon_in-range/index.md
@@ -0,0 +1,94 @@
+---
+title: ':in-range'
+slug: Web/CSS/:in-range
+tags:
+ - CSS
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:in-range
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes "Pseudo-classes") **`:in-range`** de [CSS](/es/docs/Web/CSS) representa un elemento {{htmlelement("input")}} cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.
+
+```css
+/* Selecciona cualquier {{CSSRef}}
-
-La pseudo-clase :invalidCSS representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyos contenidos no se puedan validar .
-
-/* Selecciona cualquier <input> no válido */
-input:invalid {
- background-color: pink;
-}
-
-Esta pseudo-clase es útil para resaltar errores de campo para el usuario.
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.
-
-HTML
-
-<form>
- <label for="url_input">Ingresa una URL:</label>
- <input type="url" id="url_input" />
- <br />
- <br />
- <label for="email_input">Introduzca una dirección de correo electrónico:</label>
- <input type="email" id="email_input" required/>
-</form>
-
-CSS
-
-input:invalid {
- background-color: #ffdddd;
-}
-
-form:invalid {
- border: 5px solid #ffdddd;
-}
-
-input:valid {
- background-color: #ddffdd;
-}
-
-form:valid {
- border: 5px solid #ddffdd;
-}
-
-input:required {
- border-color: #800000;
- border-width: 3px;
-}
-
-input:required:invalid {
- border-color: #C00000;
-}
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo', 600, 150)}}
-
-Problemas de accesibilidad
-
-El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.
-
-
-
-Notas
-
-
-
-Si alguno de los radio buttons en un grupo es required, la pseudo-clase :invalid se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo name).
-
-Gecko por defecto
-
-Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad {{Cssxref("box-shadow")}}) a la pseudoclase {{cssxref(":-moz-ui-invalid")}}, que se aplica en un subconjunto de casos para: :invalid.
-
-Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:
-
-:invalid {
- box-shadow: none;
-}
-
-:-moz-submit-invalid {
- box-shadow: none;
-}
-
-:-moz-ui-invalid {
- box-shadow: none;
-}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}
- {{Spec2('HTML WHATWG')}}
- Ningún cambio.
-
-
- {{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}
- {{Spec2('HTML5 W3C')}}
- Define la semántica de HTML y la validación de restricciones.
-
-
- {{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}
- {{Spec2('CSS4 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.invalid")}}
-
Ver también
-
-
- Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}
- Pseudo-clases relacionadas de Mozilla: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}
- Validación de datos de formulario
diff --git a/files/es/web/css/_colon_invalid/index.md b/files/es/web/css/_colon_invalid/index.md
new file mode 100644
index 00000000000000..89ee346da2ebbc
--- /dev/null
+++ b/files/es/web/css/_colon_invalid/index.md
@@ -0,0 +1,128 @@
+---
+title: ':invalid'
+slug: Web/CSS/:invalid
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:invalid
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:invalid`** de [CSS](/es/docs/Web/CSS) representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyos contenidos no se puedan [validar](/es/docs/Web/Guide/HTML/HTML5/Constraint_validation).
+
+```css
+/* Selecciona cualquier {{CSSRef}}{{SeeCompatTable}}
-
-Resumen
-
-La pseudo-clase :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: Esta pseudo-clase está en progreso de ser estandarizada en
Selectores CSS Nivel 4 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.
Sintaxis
-
-{{csssyntax}}
-
-Valores
-
-
- selectorUn selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3 , y puede incluir el combinador descendiente.
-
-
-Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
-
-Ejemplos
-
-Por ejemplo, el siguiente 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;
-}
-
-
-Puede ser reemplazado con:
-
-/* 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 abajo.)
-
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
- list-style-type: square;
-}
-
-Notas
-
-Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().
-
-Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:
-
-/* 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*/
-
-
-Usando :-any(), en cambio, es mucho más fácil:
-
-/* 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;
-}
-
-
-
-Bug 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.
-
-Por ejemplo
-
-.a > :-moz-any(.b, .c)
-
-
-es más lento que:
-
-.a > .b, .a > .c
-
-
-y lo siguiente es rápido:
-
-:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.selectors.is")}}
diff --git a/files/es/web/css/_colon_is/index.md b/files/es/web/css/_colon_is/index.md
new file mode 100644
index 00000000000000..2388e759402019
--- /dev/null
+++ b/files/es/web/css/_colon_is/index.md
@@ -0,0 +1,147 @@
+---
+title: ':any'
+slug: Web/CSS/:is
+tags:
+ - CSS
+ - Experimental
+ - Pseudo-Clase CSS
+ - Referencia
+translation_of: Web/CSS/:is
+translation_of_original: Web/CSS/:any
+original_slug: Web/CSS/:any
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+## Resumen
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes "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:** 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.
+
+## Sintaxis
+
+{{csssyntax}}
+
+### Valores
+
+- `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.
+
+> **Nota:** Los selectores pueden **no** contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
+
+## Ejemplos
+
+Por ejemplo, el siguiente CSS:
+
+```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;
+}
+```
+
+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.)
+
+```css
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+ list-style-type: square;
+}
+```
+
+## Notas
+
+Esto es particularmente útil al tratar con [secciones y encabezados](/es/docs/Sections_and_Outlines_of_an_HTML5_document "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()`.
+
+Por ejemplo, sin `:any()`, estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:
+
+```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*/
+```
+
+Usando `:-any()`, en cambio, es mucho más fácil:
+
+```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;
+}
+```
+
+### Problemas con rendimiento y especificidad
+
+[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.
+
+Por ejemplo
+
+```css
+.a > :-moz-any(.b, .c)
+```
+
+es más lento que:
+
+```css
+.a > .b, .a > .c
+```
+
+y lo siguiente es rápido:
+
+```css
+:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+```
+
+## Compatibilidad de navegadores
+
+{{Compat("css.selectors.is")}}
diff --git a/files/es/web/css/_colon_lang/index.html b/files/es/web/css/_colon_lang/index.html
deleted file mode 100644
index 4cfb1d3a7b46ce..00000000000000
--- a/files/es/web/css/_colon_lang/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: ':lang'
-slug: 'Web/CSS/:lang'
-tags:
- - CSS
- - Pseudo-clase
- - Web
-translation_of: 'Web/CSS/:lang'
----
-{{CSSRef}}
-
-La pseudo-clase :lang()CSS es utilizada para modificar elementos en función del idioma en el que se determina que están.
-
-/* Selecciona cualquier <p> en inglés (en) */
-p:lang(en) {
- quotes: '\201C' '\201D' '\2018' '\2019';
-}
-
-
-
Nota: En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.
-
Sintaxis
-
-
-
-{{csssyntax}}
-
-Parámetro
-
-
- <language-code>Un {{cssxref("<string>")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones HTML .
-
-
-Ejemplo
-
-En este ejemplo, la pseudo-clase :lang() se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando selectores de hijo . Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.
-
-HTML
-
-<div lang="en"><q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q></div>
-<div lang="fr"><q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q></div>
-<div lang="de"><q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q></div>
-
-
-CSS
-
-:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
-:lang(fr) > q { quotes: '« ' ' »'; }
-:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo', 350)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}
- {{Spec2('CSS4 Selectors')}}
- Ningún cambio.
-
-
- {{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}
- {{Spec2('CSS3 Selectors')}}
- Ningún cambio significativo.
-
-
- {{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}
- {{Spec2('CSS2.1')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.lang")}}
-
Ver también
-
-
diff --git a/files/es/web/css/_colon_lang/index.md b/files/es/web/css/_colon_lang/index.md
new file mode 100644
index 00000000000000..6b393045548b35
--- /dev/null
+++ b/files/es/web/css/_colon_lang/index.md
@@ -0,0 +1,74 @@
+---
+title: ':lang'
+slug: Web/CSS/:lang
+tags:
+ - CSS
+ - Pseudo-clase
+ - Web
+translation_of: Web/CSS/:lang
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:lang()`** de [CSS](/es/docs/Web/CSS) es utilizada para modificar elementos en función del idioma en el que se determina que están.
+
+```css
+/* Selecciona cualquier en inglés (en) */
+p:lang(en) {
+ quotes: '\201C' '\201D' '\2018' '\2019';
+}
+```
+
+> **Nota:** En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.
+
+## Sintaxis
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+### Parámetro
+
+- ``
+ - : Un {{cssxref("<string>")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones [HTML](/es/docs/Web/HTML).
+
+## Ejemplo
+
+En este ejemplo, la pseudo-clase `:lang()` se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando [selectores de hijo](/es/docs/Web/CSS/Child_selectors). Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.
+
+### HTML
+
+```html
+Esta cita en inglés tiene una cita anidada adentro.
+Esta cita en francés tiene una cita anidada adentro.
+Esta cita en aleman tiene una cita anidada adentro.
+```
+
+### CSS
+
+```css
+:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+```
+
+### Resultado
+
+{{EmbedLiveSample('Ejemplo', 350)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ---------------------------- |
+| {{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}} | {{Spec2('CSS4 Selectors')}} | Ningún cambio. |
+| {{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}} | {{Spec2('CSS3 Selectors')}} | Ningún cambio significativo. |
+| {{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}} | {{Spec2('CSS2.1')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.lang")}}
+
+## Ver también
+
+- Pseudo-clases relacionadas con el lenguaje: {{cssxref(":lang")}}, {{cssxref(":dir")}}
+- Atributo HTML {{htmlattrxref("lang")}}
+- [BCP 47 - Etiquetas para identificar idiomas](https://tools.ietf.org/html/bcp47)
diff --git a/files/es/web/css/_colon_last-child/index.html b/files/es/web/css/_colon_last-child/index.html
deleted file mode 100644
index 8a7ac41f7fb8fc..00000000000000
--- a/files/es/web/css/_colon_last-child/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: ':last-child'
-slug: 'Web/CSS/:last-child'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:last-child'
----
-{{CSSRef}}
-
-La pseudo-clase :last-childCSS representa el último elemento entre un grupo de elementos hermanos.
-
-/* Selecciona cualquier <p> que sea el último elemento
- entre sus hermanos */
-p:last-child {
- color: lime;
-}
-
-
-
Nota : Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-Ejemplo básico
-
-HTML
-
-<div>
- <p>Este texto no está seleccionado.</p>
- <p>¡Este texto está seleccionado!</p>
-</div>
-
-<div>
- <p>Este texto no está seleccionado.</p>
- <h2>Este texto no está seleccionado: no es un `p`.</h2>
-</div>
-
-
-CSS
-
-p:last-child {
- color: lime;
- background-color: black;
- padding: 5px;
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}
-
-Diseñando una lista
-
-HTML
-
-<ul>
- <li>Artículo 1</li>
- <li>Artículo 2</li>
- <li>Artículo 3
- <ul>
- <li>Artículo 3.1</li>
- <li>Artículo 3.2</li>
- <li>Artículo 3.3</li>
- </ul>
- </li>
-</ul>
-
-CSS
-
-ul li {
- color: blue;
-}
-
-ul li:last-child {
- border: 1px solid red;
- color: red;
-}
-
-Resultado
-
-{{EmbedLiveSample('Diseñando_una_lista')}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.last-child")}}
-
Ver también
-
-
- {{cssxref(":last-of-type")}}, {{cssxref(":first-child")}}, {{cssxref(":nth-child")}}
-
diff --git a/files/es/web/css/_colon_last-child/index.md b/files/es/web/css/_colon_last-child/index.md
new file mode 100644
index 00000000000000..c3d43a638d5df3
--- /dev/null
+++ b/files/es/web/css/_colon_last-child/index.md
@@ -0,0 +1,110 @@
+---
+title: ':last-child'
+slug: Web/CSS/:last-child
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:last-child
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:last-child`** de [CSS](/es/docs/Web/CSS) representa el último elemento entre un grupo de elementos hermanos.
+
+```css
+/* Selecciona cualquier que sea el último elemento
+ entre sus hermanos */
+p:last-child {
+ color: lime;
+}
+```
+
+> **Nota:** Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Ejemplo básico
+
+#### HTML
+
+```html
+
+
Este texto no está seleccionado.
+
¡Este texto está seleccionado!
+
+
Este texto no está seleccionado.
+
Este texto no está seleccionado: no es un `p`.
+
+ Artículo 1
+ Artículo 2
+ Artículo 3
+
+ Artículo 3.1
+ Artículo 3.2
+ Artículo 3.3
+
+
+
+```
+
+#### CSS
+
+```css
+ul li {
+ color: blue;
+}
+
+ul li:last-child {
+ border: 1px solid red;
+ color: red;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Diseñando_una_lista')}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#last-child', ':last-child')}} | {{Spec2('CSS4 Selectors')}} | Los elementos coincidentes no requieren tener un padre. |
+| {{SpecName('CSS3 Selectors', '#last-child', ':last-child')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.last-child")}}
+
+## Ver también
+
+- {{cssxref(":last-of-type")}}, {{cssxref(":first-child")}}, {{cssxref(":nth-child")}}
diff --git a/files/es/web/css/_colon_last-of-type/index.html b/files/es/web/css/_colon_last-of-type/index.html
deleted file mode 100644
index 3a9041f790b1bb..00000000000000
--- a/files/es/web/css/_colon_last-of-type/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: ':last-of-type'
-slug: 'Web/CSS/:last-of-type'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:last-of-type'
----
-{{CSSRef}}
-
-La pseudo-class :last-of-typeCSS representa el último elemento de su tipo entre un grupo de elementos hermanos.
-
-/* Selecciona cualquier <p> que sea el último elemento
- de su tipo entre sus hermanos */
-p:last-of-type {
- color: lime;
-}
-
-
-
Nota : Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-Diseñando el último párrafo
-
-HTML
-
-<h2>Título</h2>
-<p>Párrafo 1</p>
-<p>Párrafo 2</p>
-
-CSS
-
-p:last-of-type {
- color: red;
- font-style: italic;
-}
-
-Resultado
-
-{{EmbedLiveSample('Diseñando_el_último_párrafo')}}
-
-Elementos anidados
-
-Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el selector universal (*) está implícito cuando no se escribe un selector simple.
-
-HTML
-
-<article>
- <div>Este `div` es primero.</div>
- <div>¡Este <span>'span' anidado es el último</span>!</div>
- <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div>
- <b>¡Este `b` califica!</b>
- <div>¡Este es el 'div' final!</div>
-</article>
-
-
-CSS
-
-article :last-of-type {
- background-color: pink;
-}
-
-Resultado
-
-{{EmbedLiveSample('Elementos_anidados', 500)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.last-of-type")}}
-
Ver también
-
-
- {{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}
-
diff --git a/files/es/web/css/_colon_last-of-type/index.md b/files/es/web/css/_colon_last-of-type/index.md
new file mode 100644
index 00000000000000..c23d4d431d817d
--- /dev/null
+++ b/files/es/web/css/_colon_last-of-type/index.md
@@ -0,0 +1,96 @@
+---
+title: ':last-of-type'
+slug: Web/CSS/:last-of-type
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:last-of-type
+---
+{{CSSRef}}
+
+La [pseudo-class](/es/docs/Web/CSS/Pseudo-classes) **`:last-of-type`** de [CSS](/es/docs/Web/CSS) representa el último elemento de su tipo entre un grupo de elementos hermanos.
+
+```css
+/* Selecciona cualquier que sea el último elemento
+ de su tipo entre sus hermanos */
+p:last-of-type {
+ color: lime;
+}
+```
+
+> **Nota:** Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Diseñando el último párrafo
+
+#### HTML
+
+```html
+
Título
+Párrafo 1
+Párrafo 2
+```
+
+#### CSS
+
+```css
+p:last-of-type {
+ color: red;
+ font-style: italic;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Diseñando_el_último_párrafo')}}
+
+### Elementos anidados
+
+Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el [selector universal](/es/docs/Web/CSS/Universal_selectors) (`*`) está implícito cuando no se escribe un selector simple.
+
+#### HTML
+
+```html
+
+ Este `div` es primero.
+ ¡Este 'span' anidado es el último !
+ ¡Este `em` anidado es el primero , pero este `em` anidado es el último !
+ ¡Este `b` califica!
+ ¡Este es el 'div' final!
+
+```
+
+#### CSS
+
+```css
+article :last-of-type {
+ background-color: pink;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Elementos_anidados', 500)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS4 Selectors')}} | Los elementos coincidentes no requieren tener un padre. |
+| {{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.last-of-type")}}
+
+## Ver también
+
+- {{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/es/web/css/_colon_left/index.html b/files/es/web/css/_colon_left/index.html
deleted file mode 100644
index b34a3f6e421e6f..00000000000000
--- a/files/es/web/css/_colon_left/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: ':left'
-slug: 'Web/CSS/:left'
-tags:
- - '@page'
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:left'
----
-{{ CSSRef() }}
-
-La :leftCSS pseudo-clase , utilizada con la regla @page at, representa todas las páginas de la izquierda de un documento impreso.
-
-/* Selects any left-hand pages when printing */
-@page :left {
- margin: 2in 3in;
-}
-
-La dirección principal de escritura del documento determina si una página es "izquierda" o "derecha". Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right (derecha); si tiene una dirección de escritura importante de derecha a izquierda, será una página :left (izquierda).
-
-
-
Nota: Esta pseudoclase se puede usar para cambiar solo las propiedades margin, padding, border y background del cuadro de página. Se ignorarán todas las demás propiedades y solo se verá afectado el cuadro de página, no el contenido del documento en la página.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-@page :left {
- margin: 2in 3in;
-}
-
-
-Especificaciones
-
-
-
-
- Especificaciones
- Estatus
- Comentario
-
-
-
-
- {{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}
- {{ Spec2('CSS3 Paged Media') }}
- Sin Cambio.
-
-
- {{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}
- {{ Spec2('CSS2.1') }}
-
- Definición Inicial.
-
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
-{{Compat("css.selectors.left")}}
-
-
-
-Ver También
-
-
- {{ Cssxref("@page") }}
- Otras pseudo-clases relacionadas con la página: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}
-
diff --git a/files/es/web/css/_colon_left/index.md b/files/es/web/css/_colon_left/index.md
new file mode 100644
index 00000000000000..ec7eeee5f51ca5
--- /dev/null
+++ b/files/es/web/css/_colon_left/index.md
@@ -0,0 +1,54 @@
+---
+title: ':left'
+slug: Web/CSS/:left
+tags:
+ - '@page'
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:left
+---
+{{ CSSRef() }}
+
+La **`:left`** [CSS](/es/docs/Web/CSS) [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes), utilizada con la regla @page at, representa todas las páginas de la izquierda de un documento impreso.
+
+```css
+/* Selects any left-hand pages when printing */
+@page :left {
+ margin: 2in 3in;
+}
+```
+
+La dirección principal de escritura del documento determina si una página es "izquierda" o "derecha". Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right (derecha); si tiene una dirección de escritura importante de derecha a izquierda, será una página :left (izquierda).
+
+> **Nota:** Esta pseudoclase se puede usar para cambiar solo las propiedades margin, padding, border y background del cuadro de página. Se ignorarán todas las demás propiedades y solo se verá afectado el cuadro de página, no el contenido del documento en la página.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+```css
+@page :left {
+ margin: 2in 3in;
+}
+```
+
+## Especificaciones
+
+| Especificaciones | Estatus | Comentario |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- |
+| {{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }} | {{ Spec2('CSS3 Paged Media') }} | Sin Cambio. |
+| {{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }} | {{ Spec2('CSS2.1') }} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.left")}}
+
+## Ver También
+
+- {{ Cssxref("@page") }}
+- Otras pseudo-clases relacionadas con la página: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}
diff --git a/files/es/web/css/_colon_link/index.html b/files/es/web/css/_colon_link/index.html
deleted file mode 100644
index fec8cd3775eee7..00000000000000
--- a/files/es/web/css/_colon_link/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: ':link'
-slug: 'Web/CSS/:link'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:link'
----
-{{ CSSRef }}
-
-La pseudo-clase :linkCSS representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo href.
-
-/* Selecciona cualquier <a> que aún no se haya visitado */
-a:link {
- color: red;
-}
-
-Los estilos definidos por la pseudo-clase :link serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :link antes de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA : :link — :visited — :hover — :active.
-
-
-
Nota: Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.
-
-HTML
-
-<a href="#ordinary-target">Este es un enlace ordinario.</a><br>
-<a href="">Ya has visitado este enlace.</a><br>
-<a>Enlace de marcador de posición (no se personalizará)</a>
-
-
-CSS
-
-a:link {
- background-color: gold;
- color: green;
-}
-
-
-Resultado
-
-{{EmbedLiveSample("Ejemplos")}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}
- {{ Spec2('HTML WHATWG') }}
-
-
-
- {{ SpecName('CSS4 Selectors', '#link', ':link') }}
- {{ Spec2('CSS4 Selectors') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS3 Selectors', '#link', ':link') }}
- {{ Spec2('CSS3 Selectors') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}
- {{ Spec2('CSS2.1') }}
- Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}.
-
-
- {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}
- {{ Spec2('CSS1') }}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.link")}}
-
Ver también
-
-
- Pseudo-clases relacionadas con enlaces: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}
-
diff --git a/files/es/web/css/_colon_link/index.md b/files/es/web/css/_colon_link/index.md
new file mode 100644
index 00000000000000..8b906c77a9014b
--- /dev/null
+++ b/files/es/web/css/_colon_link/index.md
@@ -0,0 +1,72 @@
+---
+title: ':link'
+slug: Web/CSS/:link
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:link
+---
+{{ CSSRef }}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:link`** [CSS](/es/docs/Web/CSS) representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo `href`.
+
+```css
+/* Selecciona cualquier que aún no se haya visitado */
+a:link {
+ color: red;
+}
+```
+
+Los estilos definidos por la pseudo-clase `:link` serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla `:link` antes de todas las demás reglas relacionadas con el enlace, tal como lo define el _orden LVHA_: `:link` — `:visited` — `:hover` — `:active`.
+
+> **Nota:** Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.
+
+### HTML
+
+```html
+ Este es un enlace ordinario. Ya has visitado este enlace. Enlace de marcador de posición (no se personalizará)
+```
+
+### CSS
+
+```css
+a:link {
+ background-color: gold;
+ color: green;
+}
+```
+
+### Resultado
+
+{{EmbedLiveSample("Ejemplos")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }} | {{ Spec2('HTML WHATWG') }} | |
+| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Ningún cambio. |
+| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Ningún cambio. |
+| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}. |
+| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.link")}}
+
+## Ver también
+
+- Pseudo-clases relacionadas con enlaces: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}
diff --git a/files/es/web/css/_colon_not/index.html b/files/es/web/css/_colon_not/index.html
deleted file mode 100644
index d7e4e1c2578a81..00000000000000
--- a/files/es/web/css/_colon_not/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: ':not()'
-slug: Web/CSS/:not
-tags:
- - CSS
- - Diseño
- - Referencia
- - Web
- - pseudoclase
-translation_of: Web/CSS/:not
-original_slug: Web/CSS/:not()
----
-{{CSSRef}}
-
-La pseudoclase :not()CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación .
-
-/* Selecciona cualquier elemento que NO sea un párrafo */
-:not(p) {
- color: blue;
-}
-
-
-
Notas:
-
-
- Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, :not(*) coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.
- Esta pseudoclase puede aumentar la especificidad de una regla. Por ejemplo, #foo:not(#bar) coincidirá con el mismo elemento que el #foo más simple, pero tiene una especificidad más alta.
- :not(.foo) coincidirá con cualquier cosa que no sea .foo, incluidos {{HTMLElement("html")}} y {{HTMLElement("body")}}. Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, body :not(table) a se aplicará a los enlaces dentro de una tabla, ya que {{HTMLElement("tr")}} coincidirá con la parte :not() del selector.
-
-
Sintaxis
-
-La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento .
-
-
-
La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.
-
Ejemplo
-
-HTML
-
-<p>Soy un párrafo.</p>
-<p class="fancy">¡Soy muy elegante!</p>
-<div>NO soy un párrafo.</div>
-
-
-CSS
-
-.fancy {
- text-shadow: 2px 2px 3px gold;
-}
-
-/* elementos <p> que no están en la clase `.fancy` */
-p:not(.fancy) {
- color: green;
-}
-
-/* Elementos que no son elementos <p> */
-body :not(p) {
- text-decoration: underline;
-}
-
-/* Elementos que no son elementos <div> o <span> */
-body :not(div):not(span) {
- font-weight: bold;
-}
-
-/* Elementos que no son `.crazy` o `.fancy` */
-/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
-body :not(.crazy, .fancy) {
- font-family: sans-serif;
-}
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo')}}
-
-Especificaciones
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('CSS4 Selectors', '#negation', ':not()')}}
- {{Spec2('CSS4 Selectors')}}
- Extiende su argumento para permitir algunos selectores no simples.
-
-
- {{SpecName('CSS3 Selectors', '#negation', ':not()')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.not")}}
-
Soy un párrafo.
+¡Soy muy elegante!
+NO soy un párrafo.
+```
+
+### CSS
+
+```css
+.fancy {
+ text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos que no están en la clase `.fancy` */
+p:not(.fancy) {
+ color: green;
+}
+
+/* Elementos que no son elementos
*/
+body :not(p) {
+ text-decoration: underline;
+}
+
+/* Elementos que no son elementos
o
*/
+body :not(div):not(span) {
+ font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+ font-family: sans-serif;
+}
+```
+
+### Resultado
+
+{{EmbedLiveSample('Ejemplo')}}
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#negation', ':not()')}} | {{Spec2('CSS4 Selectors')}} | Extiende su argumento para permitir algunos selectores no simples. |
+| {{SpecName('CSS3 Selectors', '#negation', ':not()')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.not")}}
diff --git a/files/es/web/css/_colon_nth-child/index.html b/files/es/web/css/_colon_nth-child/index.html
deleted file mode 100644
index dde431238c0c87..00000000000000
--- a/files/es/web/css/_colon_nth-child/index.html
+++ /dev/null
@@ -1,187 +0,0 @@
----
-title: ':nth-child'
-slug: 'Web/CSS/:nth-child'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:nth-child'
----
-{{CSSRef}}
-
-La pseudo-clase :nth-child()CSS coincide con uno o más elementos en función de su posición entre un grupo de hermanos.
-
-/* Selecciona cada cuarto elemento entre
- cualquier grupo de hermanos */
-:nth-child(4n) {
- color: lime;
-}
-
-
-Sintaxis
-
-La pseudo-clase nth-child se especifica con un único argumento, que representa el patrón para los elementos coincidentes.
-
-Valores de palabras clave
-
-
- oddRepresenta elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.
- evenRepresenta elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.
-
-
-Notación funcional
-
-
- <An+B>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento es 1. Los valores A y B deben ser ambos {{cssxref("<integer>")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-Selectores de ejemplo
-
-
- tr:nth-child(odd) o tr:nth-child(2n+1)Representa las filas impares de una tabla HTML: 1, 3, 5, etc.
- tr:nth-child(even) o tr:nth-child(2n)Representa las filas pares de una tabla HTML: 2, 4, 6, etc.
- :nth-child(7)Representa el séptimo elemento.
- :nth-child(5n)Representa los elementos 5, 10, 15, etc.
- :nth-child(3n+4)Representa los elementos 4, 7, 10, 13, etc.
- :nth-child(-n+3)Representa los primeros tres elementos entre un grupo de hermanos.
- p:nth-child(n)Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p.
- p:nth-child(1) o p:nth-child(0n+1)Representa cada <p> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.
-
-
-Ejemplo detallado
-
-HTML
-
-<h3><code>span:nth-child(2n+1)</code>, SIN un
- <code><em></code> entre los hijos.</h3>
-<p>Los hijos 1, 3, 5 y 7 son seleccionados.</p>
-<div class="first">
- <span>Span 1!</span>
- <span>Span 2</span>
- <span>Span 3!</span>
- <span>Span 4</span>
- <span>Span 5!</span>
- <span>Span 6</span>
- <span>Span 7!</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-child(2n+1)</code>, CON un
- <code><em></code> entre los hijos.</h3>
-<p>Los hijos 1, 5 y 7 son seleccionados.<br>
- 3 se usa en el conteo porque es un hijo, pero
- no se selecciona porque no es un <code><span></code>.</p>
-<div class="second">
- <span>Span!</span>
- <span>Span</span>
- <em>Este es un `em`.</em>
- <span>Span</span>
- <span>Span!</span>
- <span>Span</span>
- <span>Span!</span>
- <span>Span</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-of-type(2n+1)</code>, CON un
- <code><em></code> entre los hijos.</h3>
-<p>Los hijos 1, 4, 6 y 8 son seleccionados.<br>
- 3 no se usa en el conteo ni se selecciona porque es un <code><em></code>,
- no un <code><span></code>, y <code>nth-of-type</code> solo selecciona
- hijos de ese tipo. El <code><em></code> se omite por completo y se ignora.</p>
-<div class="third">
- <span>Span!</span>
- <span>Span</span>
- <em>Este es un `em`.</em>
- <span>Span!</span>
- <span>Span</span>
- <span>Span!</span>
- <span>Span</span>
- <span>Span!</span>
-</div>
-
-
-CSS
-
-html {
- font-family: sans-serif;
-}
-
-span,
-div em {
- padding: 5px;
- border: 1px solid green;
- display: inline-block;
- margin-bottom: 3px;
-}
-
-.first span:nth-child(2n+1),
-.second span:nth-child(2n+1),
-.third span:nth-of-type(2n+1) {
- background-color: lime;
-}
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}
- {{Spec2('CSS4 Selectors')}}
-
- Agrega la sintaxis of <selector> y especifica que no se requiere que los elementos coincidentes tengan un padre.
-
-
-
- {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.nth-child")}}
-
Ver también
-
-
- {{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}
-
diff --git a/files/es/web/css/_colon_nth-child/index.md b/files/es/web/css/_colon_nth-child/index.md
new file mode 100644
index 00000000000000..7e64742cd00794
--- /dev/null
+++ b/files/es/web/css/_colon_nth-child/index.md
@@ -0,0 +1,160 @@
+---
+title: ':nth-child'
+slug: Web/CSS/:nth-child
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:nth-child
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS) **`:nth-child()`** de [CSS](/es/docs/Web/CSS) coincide con uno o más elementos en función de su posición entre un grupo de hermanos.
+
+```css
+/* Selecciona cada cuarto elemento entre
+ cualquier grupo de hermanos */
+:nth-child(4n) {
+ color: lime;
+}
+```
+
+## Sintaxis
+
+La pseudo-clase `nth-child` se especifica con un único argumento, que representa el patrón para los elementos coincidentes.
+
+### Valores de palabras clave
+
+- `odd`
+ - : Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.
+- `even`
+ - : Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.
+
+### Notación funcional
+
+- ``
+ - : Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón `An+B`, para cada entero positivo o valor cero de `n`. El índice del primer elemento es `1`. Los valores `A` y `B` deben ser ambos {{cssxref("<integer>")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Selectores de ejemplo
+
+- `tr:nth-child(odd)` o `tr:nth-child(2n+1)`
+ - : Representa las filas impares de una tabla HTML: 1, 3, 5, etc.
+- `tr:nth-child(even)` o `tr:nth-child(2n)`
+ - : Representa las filas pares de una tabla HTML: 2, 4, 6, etc.
+- `:nth-child(7)`
+ - : Representa el séptimo elemento.
+- `:nth-child(5n)`
+ - : Representa los elementos 5, 10, 15, etc.
+- `:nth-child(3n+4)`
+ - : Representa los elementos 4, 7, 10, 13, etc.
+- `:nth-child(-n+3)`
+ - : Representa los primeros tres elementos entre un grupo de hermanos.
+- `p:nth-child(n)`
+ - : Representa cada elemento `` entre un grupo de hermanos. Esto es lo mismo que un simple selector `p`.
+- `p:nth-child(1)` o `p:nth-child(0n+1)`
+ - : Representa cada `
` que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.
+
+### Ejemplo detallado
+
+#### HTML
+
+```html
+
span:nth-child(2n+1), SIN un
+ <em> entre los hijos.Los hijos 1, 3, 5 y 7 son seleccionados.
+
+ Span 1!
+ Span 2
+ Span 3!
+ Span 4
+ Span 5!
+ Span 6
+ Span 7!
+
+
+span:nth-child(2n+1), CON un
+ <em> entre los hijos.Los hijos 1, 5 y 7 son seleccionados.<span>.
+
+ Span!
+ Span
+ Este es un `em`.
+ Span
+ Span!
+ Span
+ Span!
+ Span
+
+
+span:nth-of-type(2n+1), CON un
+ <em> entre los hijos.Los hijos 1, 4, 6 y 8 son seleccionados.<em>,
+ no un <span>, y nth-of-type solo selecciona
+ hijos de ese tipo. El <em> se omite por completo y se ignora.
+
+ Span!
+ Span
+ Este es un `em`.
+ Span!
+ Span
+ Span!
+ Span
+ Span!
+
+```
+
+#### CSS
+
+```css
+html {
+ font-family: sans-serif;
+}
+
+span,
+div em {
+ padding: 5px;
+ border: 1px solid green;
+ display: inline-block;
+ margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+ background-color: lime;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS4 Selectors')}} | Agrega la sintaxis `of ` y especifica que no se requiere que los elementos coincidentes tengan un padre. |
+| {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.nth-child")}}
+
+## Ver también
+
+- {{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}
diff --git a/files/es/web/css/_colon_nth-last-child/index.html b/files/es/web/css/_colon_nth-last-child/index.html
deleted file mode 100644
index 898718cd647615..00000000000000
--- a/files/es/web/css/_colon_nth-last-child/index.html
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: ':nth-last-child'
-slug: 'Web/CSS/:nth-last-child'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:nth-last-child'
----
-{{CSSRef}}
-
-La pseudo-clase :nth-last-child()CSS selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.
-
-/* Selecciona cada cuarto elemento entre
- cualquier grupo de hermanos, contando
- hacia atrás desde el último */
-:nth-last-child(4n) {
- color: lime;
-}
-
-
-
Nota: Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
-
Sintaxis
-
-La pseudo-clase nth-last-child se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.
-
-Valores de palabras clave
-
-
- oddRepresenta elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.
- evenRepresenta elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.
-
-
-Notación funcional
-
-
- <An+B>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento, contando desde el final, es 1. Los valores A y B deben ser ambos {{cssxref("<integer>")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-Selectores de ejemplo
-
-
- tr:nth-last-child(odd) o tr:nth-last-child(2n+1)Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.
- tr:nth-last-child(even) o tr:nth-last-child(2n)Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.
- :nth-last-child(7)Representa el séptimo elemento, contando desde el final.
- :nth-last-child(5n)Representa los elementos 5, 10, 15, etc., contando desde el final.
- :nth-last-child(3n+4)Representa los elementos 4, 7, 10, 13, etc., contando desde el final.
- :nth-last-child(-n+3)Representa los últimos tres elementos entre un grupo de hermanos.
- p:nth-last-child(n)Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p.
- p:nth-last-child(1) or p:nth-last-child(0n+1)Representa cada <p> que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}.
-
-
-Ejemplo de tabla
-
-HTML
-
-<table>
- <tbody>
- <tr>
- <td>Primera línea</td>
- </tr>
- <tr>
- <td>Segunda línea</td>
- </tr>
- <tr>
- <td>Tercera línea</td>
- </tr>
- <tr>
- <td>Cuarta línea</td>
- </tr>
- <tr>
- <td>Quinta línea</td>
- </tr>
- </tbody>
-</table>
-
-
-CSS
-
-table {
- border: 1px solid blue;
-}
-
-/* Selecciona los últimos tres elementos */
-tr:nth-last-child(-n+3) {
- background-color: pink;
-}
-
-/* Toma todos los elementos a partir del penúltimo elemento */
-tr:nth-last-child(n+2) {
- color: blue;
-}
-
-/* Seleccione solo el penúltimo elemento */
-tr:nth-last-child(2) {
- font-weight: 600;
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}
-
-Ejemplo de caso Edge
-
-Como n comienza en cero, mientras que el último elemento comienza en uno, n y n+1 seleccionarán los mismos elementos.
-
-HTML
-
-<table>
- <tbody>
- <tr>
- <td>Primera línea</td>
- </tr>
- <tr>
- <td>Segunda línea</td>
- </tr>
- <tr>
- <td>Tercera línea</td>
- </tr>
- </tbody>
-</table>
-
-CSS
-
-tr:nth-last-child(n) {
- background-color: lightgray;
-}
-
-tr:nth-last-child(n+1){
- font-weight: 600;
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.nth-last-child")}}
-
Ver también
-
-
- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
-
diff --git a/files/es/web/css/_colon_nth-last-child/index.md b/files/es/web/css/_colon_nth-last-child/index.md
new file mode 100644
index 00000000000000..5d84445ddb5d70
--- /dev/null
+++ b/files/es/web/css/_colon_nth-last-child/index.md
@@ -0,0 +1,172 @@
+---
+title: ':nth-last-child'
+slug: Web/CSS/:nth-last-child
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:nth-last-child
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:nth-last-child()`** de [CSS](/es/docs/Web/CSS) selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.
+
+```css
+/* Selecciona cada cuarto elemento entre
+ cualquier grupo de hermanos, contando
+ hacia atrás desde el último */
+:nth-last-child(4n) {
+ color: lime;
+}
+```
+
+> **Nota:** Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
+
+## Sintaxis
+
+La pseudo-clase `nth-last-child` se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.
+
+### Valores de palabras clave
+
+- `odd`
+ - : Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.
+- `even`
+ - : Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.
+
+### Notación funcional
+
+- ``
+ - : Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón `An+B`, para cada entero positivo o valor cero de `n`. El índice del primer elemento, contando desde el final, es `1`. Los valores `A` y `B` deben ser ambos {{cssxref("<integer>")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Selectores de ejemplo
+
+- `tr:nth-last-child(odd)` o `tr:nth-last-child(2n+1)`
+ - : Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.
+- `tr:nth-last-child(even)` o `tr:nth-last-child(2n)`
+ - : Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.
+- `:nth-last-child(7)`
+ - : Representa el séptimo elemento, contando desde el final.
+- `:nth-last-child(5n)`
+ - : Representa los elementos 5, 10, 15, etc., contando desde el final.
+- `:nth-last-child(3n+4)`
+ - : Representa los elementos 4, 7, 10, 13, etc., contando desde el final.
+- `:nth-last-child(-n+3)`
+ - : Representa los últimos tres elementos entre un grupo de hermanos.
+- `p:nth-last-child(n)`
+ - : Representa cada elemento `` entre un grupo de hermanos. Esto es lo mismo que un simple selector `p`.
+- `p:nth-last-child(1)` or `p:nth-last-child(0n+1)`
+ - : Representa cada `
` que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}.
+
+### Ejemplo de tabla
+
+#### HTML
+
+```html
+
+
+
+ Primera línea
+
+
+ Segunda línea
+
+
+ Tercera línea
+
+
+ Cuarta línea
+
+
+ Quinta línea
+
+
+
+```
+
+#### CSS
+
+```css
+table {
+ border: 1px solid blue;
+}
+
+/* Selecciona los últimos tres elementos */
+tr:nth-last-child(-n+3) {
+ background-color: pink;
+}
+
+/* Toma todos los elementos a partir del penúltimo elemento */
+tr:nth-last-child(n+2) {
+ color: blue;
+}
+
+/* Seleccione solo el penúltimo elemento */
+tr:nth-last-child(2) {
+ font-weight: 600;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}
+
+### Ejemplo de caso Edge
+
+Como `n` comienza en cero, mientras que el último elemento comienza en uno, `n` y `n+1` seleccionarán los mismos elementos.
+
+#### HTML
+
+```html
+
+
+
+ Primera línea
+
+
+ Segunda línea
+
+
+ Tercera línea
+
+
+
+```
+
+#### CSS
+
+```css
+tr:nth-last-child(n) {
+ background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+ font-weight: 600;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS4 Selectors')}} | Los elementos coincidentes no requieren tener un padre. |
+| {{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.nth-last-child")}}
+
+## Ver también
+
+- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/es/web/css/_colon_nth-last-of-type/index.html b/files/es/web/css/_colon_nth-last-of-type/index.html
deleted file mode 100644
index 58b12107446665..00000000000000
--- a/files/es/web/css/_colon_nth-last-of-type/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: ':nth-last-of-type()'
-slug: 'Web/CSS/:nth-last-of-type'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:nth-last-of-type'
----
-{{CSSRef}}
-
-La pseudo-clase :nth-last-of-type()CSS coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.
-
-/* Selecciona cada cuarto elementos <p> entre
- cualquier grupo de hermanos, contando hacia
- atrás desde el último */
-p:nth-last-of-type(4n) {
- color: lime;
-}
-
-
-
Nota: Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-of-type")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
-
Sintaxis
-
-La pseudo-clase nth-last-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.
-
-Ver {{Cssxref(":nth-last-child")}} para una explicación más detallada de su sintaxis.
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-HTML
-
-<div>
- <span>Este es un span.</span>
- <span>Este es otro span.</span>
- <em>Esto esta enfatizado.</em>
- <span>¡Guauu, este span se pone color lima!</span>
- <strike>Esto está tachado.</strike>
- <span>Aquí hay un último span.</span>
-</div>
-
-CSS
-
-span:nth-last-of-type(2) {
- background-color: lime;
-}
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo')}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.nth-last-of-type")}}
-
Ver también
-
-
- {{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}
-
diff --git a/files/es/web/css/_colon_nth-last-of-type/index.md b/files/es/web/css/_colon_nth-last-of-type/index.md
new file mode 100644
index 00000000000000..e9a5d7629168b5
--- /dev/null
+++ b/files/es/web/css/_colon_nth-last-of-type/index.md
@@ -0,0 +1,77 @@
+---
+title: ':nth-last-of-type()'
+slug: Web/CSS/:nth-last-of-type
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:nth-last-of-type
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:nth-last-of-type()`** [CSS](/es/docs/Web/CSS) coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.
+
+```css
+/* Selecciona cada cuarto elementos entre
+ cualquier grupo de hermanos, contando hacia
+ atrás desde el último */
+p:nth-last-of-type(4n) {
+ color: lime;
+}
+```
+
+> **Nota:** Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-of-type")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.
+
+## Sintaxis
+
+La pseudo-clase `nth-last-of-type` se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.
+
+Ver {{Cssxref(":nth-last-child")}} para una explicación más detallada de su sintaxis.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### HTML
+
+```html
+
+ Este es un span.
+ Este es otro span.
+ Esto esta enfatizado.
+ ¡Guauu, este span se pone color lima!
+ Esto está tachado.
+ Aquí hay un último span.
+
+```
+
+### CSS
+
+```css
+span:nth-last-of-type(2) {
+ background-color: lime;
+}
+```
+
+### Resultado
+
+{{EmbedLiveSample('Ejemplo')}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}} | {{Spec2('CSS4 Selectors')}} | Los elementos coincidentes no requieren tener un padre. |
+| {{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.nth-last-of-type")}}
+
+## Ver también
+
+- {{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}
diff --git a/files/es/web/css/_colon_nth-of-type/index.html b/files/es/web/css/_colon_nth-of-type/index.html
deleted file mode 100644
index 686f5b6586f625..00000000000000
--- a/files/es/web/css/_colon_nth-of-type/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: ':nth-of-type'
-slug: 'Web/CSS/:nth-of-type'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:nth-of-type'
----
-{{CSSRef}}
-
-La pseudo-clase :nth-of-type()CSS selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.
-
-/* Selecciona cada cuarto elementos <p> entre
- cualquier grupo de hermanos */
-p:nth-of-type(4n) {
- color: lime;
-}
-
-Sintaxis
-
-La pseudo-clase nth-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.
-
-Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxis.
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-Ejemplo básico
-
-HTML
-
-<div>
- <div>Este elemento no se cuenta.</div>
- <p>1er párrafo.</p>
- <p>2do párrafo.</p>
- <div>Este elemento no se cuenta.</div>
- <p>3er párrafo.</p>
- <p>4to párrafo.</p>
-</div>
-
-CSS
-
-/* Párrafos impares */
-p:nth-of-type(2n+1) {
- color: red;
-}
-
-/* Párrafos pares */
-p:nth-of-type(2n) {
- color: blue;
-}
-
-/* Primer párrafo */
-p:nth-of-type(1) {
- font-weight: bold;
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_básico', 250, 200)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}
- {{Spec2('CSS3 Selectors')}}
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.nth-of-type")}}
-
Ver también
-
-
- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
-
diff --git a/files/es/web/css/_colon_nth-of-type/index.md b/files/es/web/css/_colon_nth-of-type/index.md
new file mode 100644
index 00000000000000..f5499ad102c47c
--- /dev/null
+++ b/files/es/web/css/_colon_nth-of-type/index.md
@@ -0,0 +1,87 @@
+---
+title: ':nth-of-type'
+slug: Web/CSS/:nth-of-type
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:nth-of-type
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** de [CSS](/es/docs/Web/CSS) selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.
+
+```css
+/* Selecciona cada cuarto elementos entre
+ cualquier grupo de hermanos */
+p:nth-of-type(4n) {
+ color: lime;
+}
+```
+
+## Sintaxis
+
+La pseudo-clase `nth-of-type` se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.
+
+Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxis.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Ejemplo básico
+
+#### HTML
+
+```html
+
+
Este elemento no se cuenta.
+
1er párrafo.
+
2do párrafo.
+
Este elemento no se cuenta.
+
3er párrafo.
+
4to párrafo.
+
{{CSSRef}}
-
-La pseudo-clase :only-childCSS representa un elemento sin hermanos. Esto es lo mismo que :first-child:last-child o :nth-child(1):nth-last-child(1), pero con una especificidad menor.
-
-/* Selecciona cada <p>, pero solo si es el */
-/* único hijo de su padre */
-p:only-child {
- background-color: lime;
-}
-
-
-
Nota : Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Ejemplo básico
-
-HTML
-
-<main>
- <div>
- <i>Soy un hijo único y solitario.</i>
- </div>
-
- <div>
- <i>Yo tengo hermanos.</i><br>
- <b>¡Yo también!</b><br>
- <span>Yo también tengo hermanos, <span>pero este es un hijo único.</span></span>
- </div>
-</main>
-
-CSS
-
-main :only-child {
- color: red;
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_básico','100%',180)}}
-
-Ejemplo de lista
-
-HTML
-
-<ol>
- <li>Primero
- <ul>
- <li>Esta lista tiene solo un elemento.
- </ul>
- </li>
- <li>Segundo
- <ul>
- <li>Esta lista tiene tres elementos.
- <li>Esta lista tiene tres elementos.
- <li>Esta lista tiene tres elementos.
- </ul>
- </li>
-<ol>
-
-
-CSS
-
-li li {
- list-style-type: disc;
-}
-li:only-child {
- color: red;
- list-style-type: square;
-}
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}
-
-Especificaciones
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}
- {{Spec2('CSS3 Selectors')}}
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
-
{{Compat("css.selectors.only-child")}}
-
-
Ver también
-
-
- {{Cssxref(":only-of-type")}}
- {{Cssxref(":first-child")}}
- {{Cssxref(":last-child")}}
- {{Cssxref(":nth-child")}}
-
diff --git a/files/es/web/css/_colon_only-child/index.md b/files/es/web/css/_colon_only-child/index.md
new file mode 100644
index 00000000000000..f46b34cd2c1a48
--- /dev/null
+++ b/files/es/web/css/_colon_only-child/index.md
@@ -0,0 +1,115 @@
+---
+title: ':only-child'
+slug: Web/CSS/:only-child
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:only-child
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes) **`:only-child`** de [CSS](/es/docs/Web/CSS) representa un elemento sin hermanos. Esto es lo mismo que `:first-child:last-child` o `:nth-child(1):nth-last-child(1)`, pero con una especificidad menor.
+
+```css
+/* Selecciona cada , pero solo si es el */
+/* único hijo de su padre */
+p:only-child {
+ background-color: lime;
+}
+```
+
+> **Nota:** Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Ejemplo básico
+
+#### HTML
+
+```html
+
+
+ Soy un hijo único y solitario.
+
+
+
+ Yo tengo hermanos. ¡Yo también! Yo también tengo hermanos, pero este es un hijo único.
+
+
+```
+
+#### CSS
+
+```css
+main :only-child {
+ color: red;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Ejemplo_básico','100%',180)}}
+
+### Ejemplo de lista
+
+#### HTML
+
+```html
+
+ Primero
+
+ Esta lista tiene solo un elemento.
+
+
+ Segundo
+
+ Esta lista tiene tres elementos.
+ Esta lista tiene tres elementos.
+ Esta lista tiene tres elementos.
+
+
+
+```
+
+#### CSS
+
+```css
+li li {
+ list-style-type: disc;
+}
+li:only-child {
+ color: red;
+ list-style-type: square;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS4 Selectors')}} | Los elementos coincidentes no requieren tener un padre. |
+| {{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.only-child")}}
+
+## Ver también
+
+- {{Cssxref(":only-of-type")}}
+- {{Cssxref(":first-child")}}
+- {{Cssxref(":last-child")}}
+- {{Cssxref(":nth-child")}}
diff --git a/files/es/web/css/_colon_only-of-type/index.html b/files/es/web/css/_colon_only-of-type/index.html
deleted file mode 100644
index 8659bd234a4ba3..00000000000000
--- a/files/es/web/css/_colon_only-of-type/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: ':only-of-type'
-slug: 'Web/CSS/:only-of-type'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:only-of-type'
----
-{{CSSRef}}
-
-La pseudo-clase :only-of-typeCSS representa un elemento que no tiene hermanos del mismo tipo.
-
-/* Selecciona cada <p>, pero solo si es el único */
-/* elemento <p> dentro de su padre */
-p:only-of-type {
- background-color: lime;
-}
-
-
-
Nota : Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-HTML
-
-<main>
- <div>Soy un `div` #1.</div>
- <p>Yo soy el único `p` entre mis hermanos.</p>
- <div>Soy un `div` #2.</div>
- <div>Soy un `div` #3.
- <i>Yo soy el único hijo `i`.</i>
- <em>Soy un `em` #1.</em>
- <em>Soy un `em` #2.</em>
- </div>
-</main>
-
-
-CSS
-
-main :only-of-type {
- color: red;
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo','100%',180)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}
- {{Spec2('CSS4 Selectors')}}
- Los elementos coincidentes no requieren tener un padre.
-
-
- {{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.only-of-type")}}
-
Ver también
-
-
- {{Cssxref(":only-child")}}
- {{Cssxref(":first-of-type")}}
- {{Cssxref(":last-of-type")}}
- {{Cssxref(":nth-of-type")}}
-
diff --git a/files/es/web/css/_colon_only-of-type/index.md b/files/es/web/css/_colon_only-of-type/index.md
new file mode 100644
index 00000000000000..67f213aee98a58
--- /dev/null
+++ b/files/es/web/css/_colon_only-of-type/index.md
@@ -0,0 +1,75 @@
+---
+title: ':only-of-type'
+slug: Web/CSS/:only-of-type
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:only-of-type
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:only-of-type`** [CSS](/es/docs/Web/CSS) representa un elemento que no tiene hermanos del mismo tipo.
+
+```css
+/* Selecciona cada , pero solo si es el único */
+/* elemento
dentro de su padre */
+p:only-of-type {
+ background-color: lime;
+}
+```
+
+> **Nota:** Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplo
+
+#### HTML
+
+```html
+
+ Soy un `div` #1.
+ Yo soy el único `p` entre mis hermanos.
+ Soy un `div` #2.
+ Soy un `div` #3.
+ Yo soy el único hijo `i`.
+ Soy un `em` #1.
+ Soy un `em` #2.
+
+
+```
+
+#### CSS
+
+```css
+main :only-of-type {
+ color: red;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Ejemplo','100%',180)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}} | {{Spec2('CSS4 Selectors')}} | Los elementos coincidentes no requieren tener un padre. |
+| {{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.only-of-type")}}
+
+## Ver también
+
+- {{Cssxref(":only-child")}}
+- {{Cssxref(":first-of-type")}}
+- {{Cssxref(":last-of-type")}}
+- {{Cssxref(":nth-of-type")}}
diff --git a/files/es/web/css/_colon_optional/index.html b/files/es/web/css/_colon_optional/index.html
deleted file mode 100644
index c1fb44d54be9cc..00000000000000
--- a/files/es/web/css/_colon_optional/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: ':optional'
-slug: 'Web/CSS/:optional'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:optional'
----
-
{{ CSSRef }}
-
-La pseudo-clase :optionalCSS representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que no tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.
-
-/* Selecciona cualquier opción <input> */
-input:optional {
- border: 1px dashed black;
-}
-
-Esta pseudo-clase es útil para diseñar campos que no son necesarios para enviar un formulario.
-
-
-
Nota: La pseudo-clase {{cssxref(":required")}} selecciona los campos de formulario requeridos .
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Ver {{cssxref(":invalid")}} para un ejemplo.
-
-Problemas de accesibilidad
-
-Si un formulario contiene {{htmlelement("input")}}s opcionales, las entradas requeridas deben indicarse utilizando el atributo {{ htmlattrxref("required", "input") }}. Esto se asegurará de que las personas que navegan con la ayuda de la tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar el envío exitoso del formulario.
-
-Las entradas requeridas también deben indicarse visualmente, utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Por lo general, se utilizan textos descriptivos y/o un icono.
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}
- {{ Spec2('HTML WHATWG') }}
- Ningún cambio.
-
-
- {{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}
- {{ Spec2('HTML5 W3C') }}
- Define la semántica de HTML y la validación de restricciones.
-
-
- {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}
- {{ Spec2('CSS4 Selectors') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}
- {{ Spec2('CSS3 Basic UI') }}
- Define la pseudoclase, pero no la semántica asociada.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("css.selectors.optional")}}
-
-Ver también
-
-
- Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}
- Validación de datos de formulario
diff --git a/files/es/web/css/_colon_optional/index.md b/files/es/web/css/_colon_optional/index.md
new file mode 100644
index 00000000000000..56c0cae96ca731
--- /dev/null
+++ b/files/es/web/css/_colon_optional/index.md
@@ -0,0 +1,60 @@
+---
+title: ':optional'
+slug: Web/CSS/:optional
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:optional
+---
+{{ CSSRef }}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:optional`** de [CSS](/es/docs/Web/CSS) representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que no tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.
+
+```css
+/* Selecciona cualquier opción {{CSSRef}}
-
-La pseudo-clase :out-of-rangeCSS representa un elemento {{htmlelement("input")}} cuyo valor actual está fuera de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.
-
-/* Selecciona cualquier <input>, pero solo cuando tiene un
- rango especificado, y su valor está fuera de ese rango */
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
-}
-
-Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.
-
-Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-
-
HTML
-
-
<form action="" id="form1">
- <ul>Los valores entre 1 y 10 son válidos.
- <li>
- <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
- <label for="value1">Tu valor esta </label>
- </li>
- </ul>
-</form>
-
-
CSS
-
-
li {
- list-style: none;
- margin-bottom: 1em;
-}
-
-input {
- border: 1px solid black;
-}
-
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}
-
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
- border: 2px solid red;
-}
-
-input:in-range + label::after {
- content: 'bien.';
-}
-
-input:out-of-range + label::after {
- content: '¡fuera de rango!';
-}
-
-
Resultado
-
{{EmbedLiveSample('Ejemplo', 600, 140)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}
- {{Spec2('HTML WHATWG')}}
- Define cuándo :out-of-range coincide con los elementos en HTML.
-
-
- {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}
- {{Spec2('CSS4 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
-
{{Compat("css.selectors.out-of-range")}}
-
-
Ver también
-
-
diff --git a/files/es/web/css/_colon_out-of-range/index.md b/files/es/web/css/_colon_out-of-range/index.md
new file mode 100644
index 00000000000000..e0aec94a1782e5
--- /dev/null
+++ b/files/es/web/css/_colon_out-of-range/index.md
@@ -0,0 +1,95 @@
+---
+title: ':out-of-range'
+slug: Web/CSS/:out-of-range
+tags:
+ - CSS
+ - Presentación
+ - Pseudo-Clase CSS
+ - Referencia CSS
+ - Web
+translation_of: Web/CSS/:out-of-range
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes) **`:out-of-range`** de [CSS](/es/docs/Web/CSS) representa un elemento {{htmlelement("input")}} cuyo valor actual está fuera de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.
+
+```css
+/* Selecciona cualquier
+```
+
+### CSS
+
+```css
+li {
+ list-style: none;
+ margin-bottom: 1em;
+}
+
+input {
+ border: 1px solid black;
+}
+
+input:in-range {
+ background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+ background-color: rgba(255, 0, 0, 0.25);
+ border: 2px solid red;
+}
+
+input:in-range + label::after {
+ content: 'bien.';
+}
+
+input:out-of-range + label::after {
+ content: '¡fuera de rango!';
+}
+```
+
+### Resultado
+
+{{EmbedLiveSample('Ejemplo', 600, 140)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}} | Define cuándo `:out-of-range` coincide con los elementos en HTML. |
+| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}} | {{Spec2('CSS4 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.out-of-range")}}
+
+## Ver también
+
+- {{cssxref(":in-range")}}
+- [Validación de datos de formulario](/es/docs/Learn/HTML/Forms/Form_validation)
diff --git a/files/es/web/css/_colon_placeholder-shown/index.html b/files/es/web/css/_colon_placeholder-shown/index.html
deleted file mode 100644
index 0e3af530cfe5dc..00000000000000
--- a/files/es/web/css/_colon_placeholder-shown/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: ':placeholder-shown'
-slug: 'Web/CSS/:placeholder-shown'
-tags:
- - CSS
- - Experimental
- - Pseudo-clase
- - Referencia
-translation_of: 'Web/CSS/:placeholder-shown'
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La pseudo-clase :placeholder-shownCSS representa cualquier elemento {{htmlElement("input")}} o {{htmlElement("textarea")}} que esté mostrando actualmente el texto de marcador de posición (placeholder) .
-
-/* Selecciona cualquier elemento con un placeholder activo */
-:placeholder-shown {
- border: 2px solid silver;
-}
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Ejemplo básico
-
-HTML
-
-<input placeholder="¡Escribe algo aquí!">
-
-CSS
-
-input {
- border: 2px solid black;
- padding: 3px;
-}
-
-input:placeholder-shown {
- border-color: silver;
-}
-
-Resultado
-
-{{EmbedLiveSample("Ejemplo_básico", 200, 60)}}
-
-Texto desbordante
-
-En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad {{cssxref("text-overflow")}}.
-
-HTML
-
-<input placeholder="¡Ingresa algo en este campo, por favor!">
-
-CSS
-
-input:placeholder-shown {
- text-overflow: ellipsis;
-}
-
-Resultado
-
-{{EmbedLiveSample("Texto_desbordante", 200, 60)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}
- {{Spec2("CSS4 Selectors")}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("css.selectors.placeholder-shown")}}
-
-Ver también
-
-
- El pseudo-elemento {{cssxref("::placeholder")}} estiliza el placeholder por sí mismo .
- Elementos HTML relacionados: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}
- {{cssxref(":-moz-placeholder")}}, {{cssxref("::-moz-placeholder")}}
- Formularios HTML
diff --git a/files/es/web/css/_colon_placeholder-shown/index.md b/files/es/web/css/_colon_placeholder-shown/index.md
new file mode 100644
index 00000000000000..90a4a5ac07ab8a
--- /dev/null
+++ b/files/es/web/css/_colon_placeholder-shown/index.md
@@ -0,0 +1,90 @@
+---
+title: ':placeholder-shown'
+slug: Web/CSS/:placeholder-shown
+tags:
+ - CSS
+ - Experimental
+ - Pseudo-clase
+ - Referencia
+translation_of: Web/CSS/:placeholder-shown
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes) **`:placeholder-shown`** de [CSS](/es/docs/Web/CSS) representa cualquier elemento {{htmlElement("input")}} o {{htmlElement("textarea")}} que esté mostrando actualmente el [texto de marcador de posición (placeholder)](/es/docs/Web/HTML/Element/input#attr-placeholder).
+
+```css
+/* Selecciona cualquier elemento con un placeholder activo */
+:placeholder-shown {
+ border: 2px solid silver;
+}
+```
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Ejemplo básico
+
+#### HTML
+
+```html
+{{CSSRef}}
-
-La pseudo-clase :read-onlyCSS representa un elemento que ya no es editable por el usuario (como un input ).
-
-/* Selecciona cualquier <input> que está en modo de solo lectura */
-/* Soportado en Firefox usando prefijo */
-input:-moz-read-only {
- background-color: #ccc;
-}
-
-/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge */
-p:read-only {
- cursor: not-allowed;
-}
-input:read-only {
- background-color: #ccc;
-}
-
-
-
Nota : El selector no solo selecciona {{htmlElement("input")}} marcados como {{htmlattrxref("readonly", "input")}}; también selecccionará cualquier elemento que no pueda ser editar por el usuario. Lea sobre el atributo contenteditable .
-
Sintaxis
-
-:read-only
-
-Ejemplo
-
-HTML
-
-<input type="text" value="Aquí puedes poner lo que quieras.">
-<input type="text" value="Campo de solo lectura." readonly>
-<p>Este es un párrafo normal.</p>
-<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p>
-
-CSS
-
-input { min-width: 25em; }
-input:-moz-read-only { background: cyan; }
-input:read-only { background: cyan; }
-
-p:-moz-read-only { background: lightgray; }
-p:read-only { background: lightgray; }
-p[contenteditable="true"] { color: blue; }
-
-
-Resultado
-
-{{EmbedLiveSample("Ejemplo")}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}
- {{ Spec2('HTML WHATWG') }}
- Ningún cambio.
-
-
- {{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}
- {{ Spec2('HTML5 W3C') }}
- Define la semántica relacionada con HTML y de la validación de las restricciones.
-
-
- {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}
- {{ Spec2('CSS4 Selectors') }}
- Define la pseudoclase, pero no la semántica asociada.
-
-
-
-
-Compatibilidad con navegadores
-
-{{Compat("css.selectors.read-only")}}
-
-Ver también
-
-
- {{cssxref(":read-write")}}
- Atributo HTML {{htmlattrxref("contenteditable")}}
-
diff --git a/files/es/web/css/_colon_read-only/index.md b/files/es/web/css/_colon_read-only/index.md
new file mode 100644
index 00000000000000..52e07f55a1b146
--- /dev/null
+++ b/files/es/web/css/_colon_read-only/index.md
@@ -0,0 +1,80 @@
+---
+title: ':read-only'
+slug: Web/CSS/:read-only
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:read-only
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes) **`:read-only`** de [CSS](/es/docs/Web/CSS) representa un elemento que ya no es editable por el usuario (como un [input](/es/docs/Web/HTML/Element/input)).
+
+```css
+/* Selecciona cualquier Este es un párrafo normal.
+Puedes editar este párrafo, ¡inténtalo!
+```
+
+### CSS
+
+```css
+input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+```
+
+### Resultado
+
+{{EmbedLiveSample("Ejemplo")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML WHATWG') }} | Ningún cambio. |
+| {{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML5 W3C') }} | Define la semántica relacionada con HTML y de la validación de las restricciones. |
+| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }} | {{ Spec2('CSS4 Selectors') }} | Define la pseudoclase, pero no la semántica asociada. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.read-only")}}
+
+## Ver también
+
+- {{cssxref(":read-write")}}
+- Atributo HTML {{htmlattrxref("contenteditable")}}
diff --git a/files/es/web/css/_colon_read-write/index.html b/files/es/web/css/_colon_read-write/index.html
deleted file mode 100644
index 7fef9a8eeebe77..00000000000000
--- a/files/es/web/css/_colon_read-write/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: ':read-write'
-slug: 'Web/CSS/:read-write'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:read-write'
----
-{{CSSRef}}
-
-La pseudo-clase :read-writeCSS representa un elemento (como un input ) que es editable por el usuario.
-
-/* Selecciona cualquier elemento <input> que sea editable */
-/* Compatible con Firefox con un prefijo */
-input:-moz-read-write {
- background-color: #bbf;
-}
-
-/* Compatible con Blink/WebKit/Edge sin un prefijo */
-input:read-write {
- background-color: #bbf;
-}
-
-
-
Nota : Este selector no solo selecciona texto de {{htmlElement("input")}}; seleccionará cualquier elemento que pueda editar el usuario, como un elemento {{htmlelement("p")}} con {{htmlattrxref("contenteditable")}} establecido en él.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-HTML
-
-<input type="text" value="Escribe lo que quieras aquí.">
-<input type="text" value="Este es un campo de solo lectura." readonly>
-<p>Este es un párrafo normal.</p>
-<p contenteditable="true">¡Puedes editar este párrafo!</p>
-
-CSS
-
-input { min-width: 25em; }
-input:-moz-read-write { background: cyan; }
-input:read-write { background: cyan; }
-
-p:-moz-read-write { background: lightgray; }
-p:read-write { background: lightgray; }
-p[contenteditable="true"] { color: blue; }
-
-
-Resultado
-
-{{EmbedLiveSample("Ejemplo")}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}
- {{ Spec2('HTML WHATWG') }}
- Ningún cambio.
-
-
- {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}
- {{ Spec2('HTML5 W3C') }}
- Define la semántica con respecto a HTML y validación de restricciones.
-
-
- {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}
- {{ Spec2('CSS4 Selectors') }}
- Define la pseudo-clase, pero no la semántica asociada.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("css.selectors.read-write")}}
-
-Ver también
-
-
- {{cssxref(":read-only")}}
- Atributo HTML {{htmlattrxref("contenteditable")}}
-
diff --git a/files/es/web/css/_colon_read-write/index.md b/files/es/web/css/_colon_read-write/index.md
new file mode 100644
index 00000000000000..fa0a0f3c877d3f
--- /dev/null
+++ b/files/es/web/css/_colon_read-write/index.md
@@ -0,0 +1,77 @@
+---
+title: ':read-write'
+slug: Web/CSS/:read-write
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:read-write
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/CSS/Pseudo-classes) **`:read-write`** de [CSS](/es/docs/Web/CSS) representa un elemento (como un [input](/es/docs/Web/HTML/Element/input)) que es editable por el usuario.
+
+```css
+/* Selecciona cualquier elemento Este es un párrafo normal.
+¡Puedes editar este párrafo!
+```
+
+### CSS
+
+```css
+input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+```
+
+### Resultado
+
+{{EmbedLiveSample("Ejemplo")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML WHATWG') }} | Ningún cambio. |
+| {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML5 W3C') }} | Define la semántica con respecto a HTML y validación de restricciones. |
+| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }} | {{ Spec2('CSS4 Selectors') }} | Define la pseudo-clase, pero no la semántica asociada. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.read-write")}}
+
+## Ver también
+
+- {{cssxref(":read-only")}}
+- Atributo HTML {{htmlattrxref("contenteditable")}}
diff --git a/files/es/web/css/_colon_required/index.html b/files/es/web/css/_colon_required/index.html
deleted file mode 100644
index 9a48ec76829bd6..00000000000000
--- a/files/es/web/css/_colon_required/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: ':required'
-slug: 'Web/CSS/:required'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:required'
----
-{{ CSSRef }}
-
-La pseudo-clase :requiredCSS representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.
-
-/* Selecciona cualquier <input> requerido */
-input:required {
- border: 1px dashed red;
-}
-
-Esta pseudo-clase es útil para resaltar campos que deben tener datos válidos antes de que se pueda enviar un formulario.
-
-
-
Nota: La pseudoclase {{cssxref(":optional")}} selecciona campos de formulario opcionales .
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Ver {{cssxref(":invalid")}} para un ejemplo.
-
-Problemas de accesibilidad
-
-Obligatoriamente los {{htmlelement("input")}} deben tener el atributo {{ htmlattrxref("required", "input") }} aplicado a ellos. Esto asegurará que las personas que navegan con la ayuda de tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar un envío exitoso.
-
-Si el formulario también contiene entradas opcionales, las entradas requeridas deben indicarse visualmente utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('HTML WHATWG', '#selector-required', ':required') }}
- {{ Spec2('HTML WHATWG') }}
- Ningún cambio.
-
-
- {{ SpecName('HTML5 W3C', '#selector-required', ':required') }}
- {{ Spec2('HTML5 W3C') }}
- Define la semántica de HTML y la validación de restricciones.
-
-
- {{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}
- {{ Spec2('CSS4 Selectors') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}
- {{ Spec2('CSS3 Basic UI') }}
- Define la pseudo-clase, pero no la semántica asociada.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("css.selectors.required")}}
-
-Ver también
-
-
- Otras pseudo-clases relacionadas con la validación: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}
- Validación de datos de formulario
diff --git a/files/es/web/css/_colon_required/index.md b/files/es/web/css/_colon_required/index.md
new file mode 100644
index 00000000000000..b093357ac73be9
--- /dev/null
+++ b/files/es/web/css/_colon_required/index.md
@@ -0,0 +1,60 @@
+---
+title: ':required'
+slug: Web/CSS/:required
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:required
+---
+{{ CSSRef }}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:required`** de [CSS](/es/docs/Web/CSS) representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.
+
+```css
+/* Selecciona cualquier {{ CSSRef() }}
-
-La pseudo-clase CSS :rightregla-at {{cssxref("@page")}}, representa todas las páginas de la derecha de un documento impreso.
-
-/* Selecciona cualquier página de la derecha al imprimir */
-@page :right {
- margin: 2in 3in;
-}
-
-Que una página dada sea "izquierda" o "derecha" está determinada por la dirección principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right; si tiene una dirección de escritura principal de derecha a izquierda, entonces será una página {{Cssxref(":left")}}.
-
-
-
Nota: No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, y {{ Cssxref("background") }} de la caja de página. Se ignorarán todas las demás propiedades y solo se verá afectada la caja de página, no el contenido del documento en la página.
-
Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-@page :right {
- margin: 2in 3in;
-}
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}
- {{ Spec2('CSS3 Paged Media') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}
- {{ Spec2('CSS2.1') }}
- Definición inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
-{{Compat("css.selectors.right")}}
-
-
-
-Ver también
-
-
- {{ Cssxref("@page") }}
- Otras páginas relacionadas con la pseudo-clases: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}
-
diff --git a/files/es/web/css/_colon_right/index.md b/files/es/web/css/_colon_right/index.md
new file mode 100644
index 00000000000000..ba8a9198312037
--- /dev/null
+++ b/files/es/web/css/_colon_right/index.md
@@ -0,0 +1,54 @@
+---
+title: ':right'
+slug: Web/CSS/:right
+tags:
+ - '@page'
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:right
+---
+{{ CSSRef() }}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) [CSS](/es/docs/Web/CSS) **`:right`**, utilizada con la [regla-at](/es/docs/Web/CSS/At-rule) {{cssxref("@page")}}, representa todas las páginas de la derecha de un documento impreso.
+
+```css
+/* Selecciona cualquier página de la derecha al imprimir */
+@page :right {
+ margin: 2in 3in;
+}
+```
+
+Que una página dada sea "izquierda" o "derecha" está determinada por la dirección principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página `:right`; si tiene una dirección de escritura principal de derecha a izquierda, entonces será una página {{Cssxref(":left")}}.
+
+> **Nota:** No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, y {{ Cssxref("background") }} de la caja de página. Se ignorarán todas las demás propiedades y solo se verá afectada la caja de página, no el contenido del documento en la página.
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+```css
+@page :right {
+ margin: 2in 3in;
+}
+```
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }} | {{ Spec2('CSS3 Paged Media') }} | Ningún cambio. |
+| {{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }} | {{ Spec2('CSS2.1') }} | Definición inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.right")}}
+
+## Ver también
+
+- {{ Cssxref("@page") }}
+- Otras páginas relacionadas con la pseudo-clases: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}
diff --git a/files/es/web/css/_colon_root/index.html b/files/es/web/css/_colon_root/index.html
deleted file mode 100644
index ebcccee90dbbb7..00000000000000
--- a/files/es/web/css/_colon_root/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: ':root'
-slug: 'Web/CSS/:root'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:root'
----
-{{CSSRef}}
-
-La pseudo-clase :rootCSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento {{HTMLElement("html")}} y es idéntico al selector html, excepto que su especificidad es mayor.
-
-/* Selecciona el elemento raíz del documento:
- <html> en el caso de HTML */
-:root {
- background: yellow;
-}
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-:root puede ser útil para declarar variables CSS globales:
-
-:root {
- --main-color: hotpink;
- --pane-padding: 5px 42px;
-}
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}
- {{Spec2('CSS4 Selectors')}}
- Ningún cambio.
-
-
- {{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}
- {{Spec2('CSS3 Selectors')}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("css.selectors.root")}}
diff --git a/files/es/web/css/_colon_root/index.md b/files/es/web/css/_colon_root/index.md
new file mode 100644
index 00000000000000..1baef8b9deafcf
--- /dev/null
+++ b/files/es/web/css/_colon_root/index.md
@@ -0,0 +1,48 @@
+---
+title: ':root'
+slug: Web/CSS/:root
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:root
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:root`** de [CSS](/es/docs/Web/CSS) selecciona el elemento raíz de un árbol que representa el documento. En HTML, `:root` representa el elemento {{HTMLElement("html")}} y es idéntico al selector `html`, excepto que su [especificidad](/es/docs/Web/CSS/Specificity) es mayor.
+
+```css
+/* Selecciona el elemento raíz del documento:
+ en el caso de HTML */
+:root {
+ background: yellow;
+}
+```
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplo
+
+`:root` puede ser útil para declarar [variables CSS](/es/docs/Web/CSS/Using_CSS_variables) globales:
+
+```css
+:root {
+ --main-color: hotpink;
+ --pane-padding: 5px 42px;
+}
+```
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}} | {{Spec2('CSS4 Selectors')}} | Ningún cambio. |
+| {{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}} | {{Spec2('CSS3 Selectors')}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.root")}}
diff --git a/files/es/web/css/_colon_target/index.html b/files/es/web/css/_colon_target/index.html
deleted file mode 100644
index 5e136a81463442..00000000000000
--- a/files/es/web/css/_colon_target/index.html
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: ':target'
-slug: 'Web/CSS/:target'
-tags:
- - CSS
- - Layout
- - Pseudo clase CSS
- - Referencia
- - Web
-translation_of: 'Web/CSS/:target'
----
-{{CSSRef}}
-
-La pseudo-clase :targetCSS representa un elemento único (el elemento objetivo ) con un {{htmlattrxref("id")}} que coincide con el fragmento de la URL.
-
-/* Selecciona un elemento con una ID que coincida con el fragmento de la URL actual */
-:target {
- border: 2px solid black;
-}
-
-Por ejemplo, la siguiente URL tiene un fragmento (indicado por el signo #) que apunta a un elemento llamado section2:
-
-http://www.example.com/index.html#section2
-
-El siguiente elemento sería seleccionado por un selector :target cuando la URL actual sea igual a la anterior:
-
-<section id="section2">Ejemplo</section>
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Una tabla de contenido
-
-La pseudo-clase :target se puede usar para resaltar la parte de una página a la que se ha vinculado desde una tabla de contenido.
-
-HTML
-
-<h3>Tabla de contenido</h3>
-<ol>
- <li><a href="#p1">¡Salta al primer párrafo!</a></li>
- <li><a href="#p2">¡Salta al segundo párrafo!</a></li>
- <li><a href="#nowhere">Este enlace no va a ninguna parte,
- porque el objetivo no existe.</a></li>
-</ol>
-
-<h3>Mi artículo divertido</h3>
-<p id="p1">Puede orientar elegir como blanco <i>este párrafo</i> utilizando un
- fragmento de URL. ¡Haz clic en el enlace de arriba para probar!</p>
-<p id="p2">Este es <i>otro párrafo</i>, también accesible
- desde los enlaces de arriba. ¿No es encantador?</p>
-
-
-CSS
-
-p:target {
- background-color: gold;
-}
-
-/* Agrega un pseudo-elemento dentro del elemento de destino */
-p:target::before {
- font: 70% sans-serif;
- content: "►";
- color: limegreen;
- margin-right: .25em;
-}
-
-/* Estilo de elementos en cursiva dentro del elemento de destino */
-p:target i {
- color: red;
-}
-
-Resultado
-
-{{EmbedLiveSample('Una_tabla_de_contenido', 500, 300)}}
-
-CSS-Puro lightbox
-
-Puede usar la pseudo-clase :target para crear un lightbox sin usar JavaScript. Esta técnica se basa en la capacidad de los enlaces de anclaje para señalar elementos que están inicialmente ocultos en la página. Una vez segmentado, el CSS cambia su display para que se muestren.
-
-
-
-HTML
-
-<ul>
- <li><a href="#ejemplo1">Abrir ejemplo #1</a></li>
- <li><a href="#ejemplo2">Abrir ejemplo #2</a></li>
-</ul>
-
-<div class="lightbox" id="ejemplo1">
- <figure>
- <a href="#" class="close"></a>
- <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
- </figure>
-</div>
-
-<div class="lightbox" id="ejemplo2">
- <figure>
- <a href="#" class="close"></a>
- <figcaption>Cras risus odio, pharetra nec ultricies et,
- mollis ac augue. Nunc et diam quis sapien dignissim auctor.
- Quisque quis neque arcu, nec gravida magna.</figcaption>
- </figure>
-</div>
-
-CSS
-
-/* lightbox sin abrir */
-.lightbox {
- display: none;
-}
-
-/* lightbox abierto */
-.lightbox:target {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* Contenido de Lightbox */
-.lightbox figcaption {
- width: 25rem;
- position: relative;
- padding: 1.5em;
- background-color: lightpink;
-}
-
-/* Botón Cerrar */
-.lightbox .close {
- position: relative;
- display: block;
-}
-
-.lightbox .close::after {
- right: -1rem;
- top: -1rem;
- width: 2rem;
- height: 2rem;
- position: absolute;
- display: flex;
- z-index: 1;
- align-items: center;
- justify-content: center;
- background-color: black;
- border-radius: 50%;
- color: white;
- content: "×";
- cursor: pointer;
-}
-
-/* superposición Lightbox */
-.lightbox .close::before {
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- position: fixed;
- background-color: rgba(0,0,0,.7);
- content: "";
- cursor: default;
-}
-
-Resultado
-
-{{EmbedLiveSample('CSS-Puro_lightbox', 500, 220)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
- {{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}
- {{Spec2("HTML WHATWG")}}
- Define la semántica específica de HTML.
-
-
- {{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}
- {{Spec2("CSS4 Selectors")}}
- Ningún cambio.
-
-
- {{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}
- {{Spec2("CSS3 Selectors")}}
- Definición Inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.target")}}
-
Ver también
-
-
diff --git a/files/es/web/css/_colon_target/index.md b/files/es/web/css/_colon_target/index.md
new file mode 100644
index 00000000000000..1e1780def75678
--- /dev/null
+++ b/files/es/web/css/_colon_target/index.md
@@ -0,0 +1,200 @@
+---
+title: ':target'
+slug: Web/CSS/:target
+tags:
+ - CSS
+ - Layout
+ - Pseudo clase CSS
+ - Referencia
+ - Web
+translation_of: Web/CSS/:target
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:target`** de [CSS](/es/docs/Web/CSS) representa un elemento único (el _elemento objetivo_) con un {{htmlattrxref("id")}} que coincide con el fragmento de la URL.
+
+```css
+/* Selecciona un elemento con una ID que coincida con el fragmento de la URL actual */
+:target {
+ border: 2px solid black;
+}
+```
+
+Por ejemplo, la siguiente URL tiene un fragmento (indicado por el signo #) que apunta a un elemento llamado `section2`:
+
+ http://www.example.com/index.html#section2
+
+El siguiente elemento sería seleccionado por un selector `:target` cuando la URL actual sea igual a la anterior:
+
+```html
+
+```
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Una tabla de contenido
+
+La pseudo-clase `:target` se puede usar para resaltar la parte de una página a la que se ha vinculado desde una tabla de contenido.
+
+#### HTML
+
+```html
+Tabla de contenido
+
+ ¡Salta al primer párrafo! ¡Salta al segundo párrafo! Este enlace no va a ninguna parte,
+ porque el objetivo no existe.
+
+Mi artículo divertido
+Puede orientar elegir como blanco este párrafo utilizando un
+ fragmento de URL. ¡Haz clic en el enlace de arriba para probar!
+Este es otro párrafo , también accesible
+ desde los enlaces de arriba. ¿No es encantador?
+```
+
+#### CSS
+
+```css
+p:target {
+ background-color: gold;
+}
+
+/* Agrega un pseudo-elemento dentro del elemento de destino */
+p:target::before {
+ font: 70% sans-serif;
+ content: "►";
+ color: limegreen;
+ margin-right: .25em;
+}
+
+/* Estilo de elementos en cursiva dentro del elemento de destino */
+p:target i {
+ color: red;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('Una_tabla_de_contenido', 500, 300)}}
+
+### CSS-Puro lightbox
+
+Puede usar la pseudo-clase `:target` para crear un lightbox sin usar JavaScript. Esta técnica se basa en la capacidad de los enlaces de anclaje para señalar elementos que están inicialmente ocultos en la página. Una vez segmentado, el CSS cambia su `display` para que se muestren.
+
+> **Nota:** Un CSS-Puro lightbox más completo basado en la pseudoclase `:target` está [disponible en GitHub](https://github.com/madmurphy/takefive.css/) ([demo](https://madmurphy.github.io/takefive.css/)).
+
+#### HTML
+
+```html
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec felis enim, placerat id eleifend eu, semper vel sem.
+
+
+
+ Cras risus odio, pharetra nec ultricies et,
+ mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+ Quisque quis neque arcu, nec gravida magna.
+
+
{{Non-standard_header}}{{CSSRef}}
-
-Resumen
-
-La pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::
-
-
- Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.
- Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.
- Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.
- Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").
-
-
-El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").
-
-Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.
-
-Especificaciones
-
-No es parte de ninguna especificación.
-
-Compatibilidad con los distintos navegadores
-
-{{Compat("css.selectors.user-invalid")}}
-
-Ver además
-
-
- {{cssxref(":valid")}}
- {{cssxref(":invalid")}}
- {{cssxref(":required")}}
- {{cssxref(":optional")}}
- {{cssxref(":-moz-ui-valid")}}
-
diff --git a/files/es/web/css/_colon_user-invalid/index.md b/files/es/web/css/_colon_user-invalid/index.md
new file mode 100644
index 00000000000000..3fed0c3d9c50f5
--- /dev/null
+++ b/files/es/web/css/_colon_user-invalid/index.md
@@ -0,0 +1,43 @@
+---
+title: ':-moz-ui-invalid'
+slug: Web/CSS/:user-invalid
+tags:
+ - CSS
+ - NeedsExample
+ - NeedsMobileBrowserCompatibility
+ - No estándar(2)
+ - Pseudo clase
+ - Referencia CSS
+translation_of: Web/CSS/:user-invalid
+original_slug: Web/CSS/:-moz-ui-invalid
+---
+{{Non-standard_header}}{{CSSRef}}
+
+## Resumen
+
+La [pseudo-clase ](/es/docs/Web/CSS/Pseudo-classes)CSS `:-moz-ui-invalid` representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene [restricciones de validación ](/es/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation)y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::
+
+- Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.
+- Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.
+- Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.
+- Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").
+
+El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").
+
+Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.
+
+## Especificaciones
+
+No es parte de ninguna especificación.
+
+## Compatibilidad con los distintos navegadores
+
+{{Compat("css.selectors.user-invalid")}}
+
+## Ver además
+
+- {{cssxref(":valid")}}
+- {{cssxref(":invalid")}}
+- {{cssxref(":required")}}
+- {{cssxref(":optional")}}
+- {{cssxref(":-moz-ui-valid")}}
diff --git a/files/es/web/css/_colon_valid/index.html b/files/es/web/css/_colon_valid/index.html
deleted file mode 100644
index e719ba40a4ca38..00000000000000
--- a/files/es/web/css/_colon_valid/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: ':valid'
-slug: 'Web/CSS/:valid'
-tags:
- - CSS
- - Diseño
- - Pseudo-clase
- - Referencia
- - Web
-translation_of: 'Web/CSS/:valid'
----
-{{CSSRef}}
-
-La pseudo-clase :validCSS representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyo contenido se valide satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.
-
-/* Selecciona cualquier <input> válido */
-input:valid {
- background-color: powderblue;
-}
-
-Esta pseudo-clase es útil para resaltar los campos correctos para el usuario.
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplos
-
-Ver {{cssxref(":invalid")}} para un ejemplo.
-
-Problemas de accesibilidad
-
-El color verde se usa comúnmente para indicar una entrada válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.
-
-
-
-Especificaciones
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}
- {{Spec2('HTML WHATWG')}}
- Ningún cambio.
-
-
- {{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}
- {{Spec2('HTML5 W3C')}}
- Define la semántica de HTML y la validación de restricciones.
-
-
- {{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}
- {{Spec2('CSS4 Selectors')}}
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-
-
{{Compat("css.selectors.valid")}}
-
Ver también
-
-
- Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}
- Validación de datos de formulario
diff --git a/files/es/web/css/_colon_valid/index.md b/files/es/web/css/_colon_valid/index.md
new file mode 100644
index 00000000000000..5eb657e78e7452
--- /dev/null
+++ b/files/es/web/css/_colon_valid/index.md
@@ -0,0 +1,55 @@
+---
+title: ':valid'
+slug: Web/CSS/:valid
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:valid
+---
+{{CSSRef}}
+
+La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:valid`** de [CSS](/es/docs/Web/CSS) representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyo contenido se [valide](/es/docs/Web/Guide/HTML/HTML5/Constraint_validation) satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.
+
+```css
+/* Selecciona cualquier {{ CSSRef }}
-
-La pseudo-clase :visitedCSS representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.
-
-/* Selecciona cualquier <a> que ha sido visitado */
-a:visited {
- color: green;
-}
-
-Los estilos definidos por la pseudo-clase :visited serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :visited después de la regla :link pero antes de las reglas :hover y :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.
-
-Restricciones de estilo
-
-Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:
-
-
- Las propiedades CSS permitidas son {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, y {{ cssxref("outline-color") }}.
- Los atributos SVG permitidos son {{SVGAttr("fill")}} y {{SVGAttr("stroke")}}.
- El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-:visited del elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en :visited se ignorará por completo.
- Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método {{domxref("window.getComputedStyle")}} mentirá y siempre devolverá el valor del color non-:visited.
-
-
-
-
-Sintaxis
-
-{{csssyntax}}
-
-Ejemplo
-
-Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con :visited. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para color y column-rule-color. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector :visited.
-
-HTML
-
-<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br>
-<a href="">Ya has visitado este enlace.</a>
-
-CSS
-
-a {
- /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
- lo que les permite ser diseñado con el estado :visited */
- background-color: white;
- border: 1px solid white;
-}
-
-a:visited {
- background-color: yellow;
- border-color: hotpink;
- color: hotpink;
-}
-
-Resultado
-
-{{EmbedLiveSample("Ejemplo")}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}
- {{ Spec2('HTML WHATWG') }}
-
-
-
- {{ SpecName('CSS4 Selectors', '#link', ':visited') }}
- {{ Spec2('CSS4 Selectors') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS3 Selectors', '#link', ':visited') }}
- {{ Spec2('CSS3 Selectors') }}
- Ningún cambio.
-
-
- {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}
- {{ Spec2('CSS2.1') }}
- Levanta la restricción para aplicar :visited solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad.
-
-
- {{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}
- {{ Spec2('CSS1') }}
- Definición inicial.
-
-
-
-
-Compatibilidad con navegadores
-
-
-
-{{Compat("css.selectors.visited")}}
-
-Ver también
-
-
diff --git a/files/es/web/css/_colon_visited/index.md b/files/es/web/css/_colon_visited/index.md
new file mode 100644
index 00000000000000..f3708412e6ff5b
--- /dev/null
+++ b/files/es/web/css/_colon_visited/index.md
@@ -0,0 +1,89 @@
+---
+title: ':visited'
+slug: Web/CSS/:visited
+tags:
+ - CSS
+ - Diseño
+ - Pseudo-clase
+ - Referencia
+ - Web
+translation_of: Web/CSS/:visited
+---
+{{ CSSRef }}
+
+La [pseudo-clase](/es/CSS/Pseudo-classes "Pseudo-classes") **`:visited`** de [CSS](/es/docs/Web/CSS) representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.
+
+```css
+/* Selecciona cualquier que ha sido visitado */
+a:visited {
+ color: green;
+}
+```
+
+Los estilos definidos por la pseudo-clase `:visited` serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla `:visited` después de la regla `:link` pero antes de las reglas `:hover` y `:active`, según lo definido por el orden LVHA: `:link` — `:visited` — `:hover` — `:active`.
+
+## Restricciones de estilo
+
+Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:
+
+- Las propiedades CSS permitidas son {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, y {{ cssxref("outline-color") }}.
+- Los atributos SVG permitidos son {{SVGAttr("fill")}} y {{SVGAttr("stroke")}}.
+- El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-`:visited` del elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en `:visited` se ignorará por completo.
+- Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método {{domxref("window.getComputedStyle")}} mentirá y siempre devolverá el valor del color non-`:visited`.
+
+> **Nota:** Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea [Privacidad y el selector :visited](/es/docs/CSS/Privacy_and_the_:visited_selector "/en-US/docs/CSS/Privacy_and_the_:visited_selector").
+
+## Sintaxis
+
+{{csssyntax}}
+
+## Ejemplo
+
+Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con `:visited`. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para `color` y `column-rule-color`. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector `:visited`.
+
+### HTML
+
+```html
+ ¿Ya has visitado este enlace? Ya has visitado este enlace.
+```
+
+### CSS
+
+```css
+a {
+ /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
+ lo que les permite ser diseñado con el estado :visited */
+ background-color: white;
+ border: 1px solid white;
+}
+
+a:visited {
+ background-color: yellow;
+ border-color: hotpink;
+ color: hotpink;
+}
+```
+
+### Resultado
+
+{{EmbedLiveSample("Ejemplo")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }} | {{ Spec2('HTML WHATWG') }} | |
+| {{ SpecName('CSS4 Selectors', '#link', ':visited') }} | {{ Spec2('CSS4 Selectors') }} | Ningún cambio. |
+| {{ SpecName('CSS3 Selectors', '#link', ':visited') }} | {{ Spec2('CSS3 Selectors') }} | Ningún cambio. |
+| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }} | {{ Spec2('CSS2.1') }} | Levanta la restricción para aplicar `:visited` solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad. |
+| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }} | {{ Spec2('CSS1') }} | Definición inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.visited")}}
+
+## Ver también
+
+- [Privacidad y el selector :visited](/es/docs/CSS/Privacy_and_the_:visited_selector "/en-US/docs/CSS/Privacy_and_the_:visited_selector")
+- pseudo-clases relacionadas con enlaces: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}
