recursal/MDN huggingface dataset:
::-moz-range-thumb
==================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS **`::-moz-range-thumb`** representa el elemento que el usuario puede usar en el *"camino"* marcado por un elemento `<input>` con `type="range"` para alterar su valor numérico.

**Nota:** Si se usa `::-moz-range-thumb` en cualquier elemento que no sea `<input type="range">` ni se seleccionará nada ni se conseguirá efecto alguno.

Syntax
------

Error: could not find syntax for this itemEjemplo
-------

### Contenido CSS


```css
input[type="range"]::-moz-range-thumb {
  background-color: green;
}
```

### Contenido HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### Salida

Una barra de progreso que utilizara este estilo se visualizarías de la siguiente manera:

![The thumb of the 'input' element with 'type=right', styled in green](/es/docs/Web/CSS/::-moz-range-thumb/screen_shot_2015-12-04_at_13.30.08.png)

Especificaciones
----------------

No es parte de ninguna especificación. El un pseudo-elemento propietario de Gecko.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* Los pseudo-elements usados por Gecko para dar estilo a otras parte de un input con typue="range":
    + `::-moz-range-track`,
    + `::-moz-range-progress`
* Pseudo-elementos similares usados por otras nevagadores:
    + `::-ms-thumb`, pseudo-elemento soportado por Internet Explorer y Edge.
    + `::-webkit-slider-thumb`, pseudo-elemento souportado por WebKit y Blink (Safari, Chrome and Opera).
* CSS-Tricks: Estilos con CSS para input con type="range" en los distintos navegadores.
* QuirksMode: Dando estilos y haciendo script con elementos deslizadores.
::-moz-scrolled-page-sequence
=============================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS `::-moz-scrolled-page-sequence` CSS representa el fondo de la previsualización para impresión.

Especificaciones
----------------

No es parte de ninguna especificación.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* `::-moz-page`
* `::-moz-page-sequence`
border-block-start-style
========================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-block-start-style`** define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-style` (en-US), `border-right-style` (en-US), `border-bottom-style`, o `border-left-style` (en-US) dependiendo de los valores definidos por`writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <'border-style'> values \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;
```


Propiedades relacionadas son `border-block-end-style`, `border-inline-start-style`, y `border-inline-end-style`, que definen los otros estilos del borde del elemento.

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

### Valores

`<'border-style'>`

El estilo de la línea del borde. Mira `border-style`.

### Sintaxis formal
```

border-block-start-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-style |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Esta propiedad se asigna a una de las propiedades del borde físico: `border-top-style` (en-US), `border-right-style` (en-US), `border-bottom-style`, o `border-left-style` (en-US).
* `writing-mode`, `direction`, `text-orientation`
text-decoration-line
====================

La propiedad **`text-decoration-line`** de CSS establece el tipo de decoración que se utiliza en el texto de un elemento, como un subrayado o un sobrerayado.

Pruébalo
--------

Al configurar varias propiedades de decoración de línea a la vez, puede ser más conveniente usar la propiedad abreviada `text-decoration` en su lugar.

Sintaxis
--------


```css
/\* Palabra clave única \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/\* Varias palabras clave \*/
text-decoration-line: underline overline; /\* Dos líneas de decoración \*/
text-decoration-line: overline underline line-through; /\* Múltiples líneas de decoración \*/

/\* Valores globales \*/
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;
```


La propiedad `text-decoration-line` se especifica como `none`, o **uno o más** valores separados por espacios de la lista a continuación.

### Valores

`none`

No produce decoración de texto.

`underline`

Cada línea de texto tiene una línea decorativa debajo.

`overline`

Cada línea de texto tiene una línea decorativa encima.

`line-through`

Cada línea de texto tiene una línea decorativa que pasa por su centro.

`blink` 
Obsoleto

El texto parpadea (alterna entre visible e invisible). Es posible que algunos navegadores no parpadeen el texto. Este valor está **obsoleto** en favor de animaciones CSS.

Definicion formal
-----------------

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis formal
---------------
```

text-decoration-line =   
  none                                                |  
  [ underline || overline || line-through || blink ]    
  
```

Ejemplos
--------

### Ejemplo básico


```html
<p class="wavy">¡Aquí hay un texto con subrayado rojo ondulado!</p>
<p class="both">Este texto tiene líneas arriba y abajo.</p>
```



```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-line-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Al configurar varias propiedades de decoración de línea a la vez, puede ser más conveniente usar la propiedad abreviada `text-decoration` en su lugar, que también incluye:
    + `text-decoration-style`
    + `text-decoration-color`
    + `text-decoration-thickness` (en-US)
* `text-underline-offset` (en-US)
:nth-last-of-type()
===================

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.


```css
/\* 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 `: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 `:nth-last-child` para una explicación más detallada de su sintaxis.

### Sintaxis formal

Error: could not find syntax for this itemEjemplo
-------

### HTML


```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


```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # nth-last-of-type-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `:nth-last-child`, `:nth-of-type`
Tipos de datos básicos de CSS
=============================

Los **tipos de datos básicos de CSS** definen los valores típicos (incluidas las palabras clave y las unidades) aceptados por las propiedades y funciones de CSS. Son un tipo especial de valor de componente.

En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "<" y ">".

Referencia
----------

* `<angle>`
* `<basic-shape>`
* `<blend-mode>`
* `<color>`
* `<custom-ident>` (en-US)
* `<filter-function>`
* `<flex>` (en-US)
* `<frequency>`
* `<gradient>`
* `<image>`
* `<integer>`
* `<length>`
* `<number>`
* `<percentage>`
* `<position>` (en-US)
* `<ratio>` (en-US)
* `<resolution>`
* `<shape-box>` (en-US)
* `<single-transition-timing-function>` (en-US)
* `<string>` (en-US)
* `<time>`
* `<transform-function>`
* `<url>()`
Especificaciones
----------------

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
Modelo de Caja de CSS
=====================

**El modelo de caja CSS** es un módulo CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

Referencia
----------

### Propiedades

#### Propiedades que controlan el flujo del contenido en una caja

* `box-decoration-break` (en-US)
* `box-sizing`
* `overflow`
* `overflow-x` (en-US)
* `overflow-y`

#### Propiedades que controlan el tamaño de una caja

* `height`
* `width`
* `max-height`
* `max-width` (en-US)
* `min-height`
* `min-width`

#### Propiedades que controlan los márgenes de una caja

* `margin`
* `margin-bottom`
* `margin-left` (en-US)
* `margin-right`
* `margin-top` (en-US)

#### Propiedades que controlan los rellenos de una caja

* `padding`
* `padding-bottom`
* `padding-left` (en-US)
* `padding-right` (en-US)
* `padding-top`

#### Otras propiedades

* `box-shadow`
* `visibility`
Guías y Herramientas
--------------------

Introduction to the CSS box model

Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.

Mastering margin collapsing

En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.

Box-shadow generator (en-US)

Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad `box-shadow`.

Especificaciones
----------------

| Specification |
| --- |
| CSS Box Model Module Level 3  |
:last-of-type
=============

La pseudo-class **`:last-of-type`** de CSS representa el último elemento de su tipo entre un grupo de elementos hermanos.


```css
/\* 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
--------

Error: could not find syntax for this itemEjemplo
-------

### Diseñando el último párrafo

#### HTML


```html
<h2>Título</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
```


#### CSS


```css
p:last-of-type {
  color: red;
  font-style: italic;
}
```


#### Resultado

### 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


```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


```css
article :last-of-type {
  background-color: pink;
}
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `:last-child`, `:nth-last-of-type`
-webkit-mask-image
==================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad CSS `-webkit-mask-image` establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| Heredable | no |
| Valor calculado | as specified, but with `url` values made absolute |
| Animation type | discrete |

Sintaxis
--------


```css
-webkit-mask-image: url(images/mymask.png);
-webkit-mask-image: url(images/foo.png), url(images/bar.png);
-webkit-mask-image: none;
```

### Valores

<uri>

La localización del recurso imagen que será utilizado como imagen de máscara.

<gradient>

La función `webkit-gradient` que será usada como imagen de máscara.

none

Usado para especificar si un elemento no tiene imagen de máscara.

### Sintaxis Formal
```

mask-image =   
  <mask-reference>#    
  
<mask-reference> =   
  none           |  
  <image>        |  
  <mask-source>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<mask-source> =   
  <url>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* )    
  
```

Ejemplos
--------


```css
body {
  -webkit-mask-image: url("images/mymask.png");
}

div {
  -webkit-mask-image: url("images/foo.png"), url("images/bar.png");
}

p {
  -webkit-mask-image: none;
}
```


Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

`-webkit-mask`, `-webkit-mask-origin`, `-webkit-mask-attachment`,`-webkit-mask-image`,`-webkit-mask-composite`,`-webkit-mask-repeat`
::-webkit-inner-spin-button
===========================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS **`::-webkit-inner-spin-button`** se usa para dar estilo a la parte interior del botón ruleta para seleccionar números en los input con type="number".

Ejemplo
-------

### Contenido CSS


```css
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
```

### Contenido HTML


```html
<input type="number" />
```

Especificaciones
----------------

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* `::-webkit-outer-spin-button`
* `::-webkit-textfield-decoration-container`
* Dando estilo a controles de formularios – WebKit
background
==========

La propiedad `background` es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar `background` para definir los valores de una o de todas las propiedades siguientes: `background-attachment`, `color`, `image`, `position`, `repeat`.

* `Valor inicial`: ver propiedades individuales
* Se aplica a: todos los elementos
* `Herencia`: no
* Porcentajes: permitido en `posición`
* Medio: `visual`
* `Valor calculada`: ver propiedades individuales
Sintaxis
--------
```

/* Usando <background-color> */
background: green;

/* Usando <bg-image> y <repeat-style> */
background: url("test.jpg") repeat-y;

/* Usando <box> and <background-color> */
background: border-box red;

/* Una sola imagen, centrada y escalada */
background: no-repeat center/80% url("../img/image.png");
```


La propiedad `background` se especifica como una o más capas de fondo, separadas por comas.

La sintaxis de cada capa es la siguiente:

* Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores
    + `<attachment>`
    + `<bg-image>`
    + `<position>`
    + `<bg-size>`
    + `<repeat-style>`
* El valor `<bg-size>` sólo puede ser incluido inmediatamente después de la <position>, separado con el carácter '/', así: "`center/80%`".
* El valor <box> puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos `background-origin` y `background-clip`. Si se incluye dos veces, la primera ocurrencia establece `background-origin`, y el segundo conjunto `background-clip`.
* El valor `<background-color>` sólo puede ser incluido en la última capa especificada.
Valores
-------

background-color

ver `color`.

background-image

ver `image`.

background-repeat

ver `repeat`.

background-attachment

ver `background-attachment`.

background-position

ver `position`.

Ejemplos
--------

### HTML


```html
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
```

### CSS


```css
.warning {
  background: red;
}

.topbanner {
  background: url("starsolid.gif") #00d repeat-y fixed;
}
```

### Result

Notas
-----

Tomando una declaración válida, la propiedad `background` inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.

### Especificaciones

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background |

### Compatibilidad con navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

`background`, `background-attachment`, `background-color`, `background-image`, `background-position`, `background-repeat`
:-moz-ui-invalid
================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La pseudo-clase CSS `:-moz-ui-invalid` representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene restricciones de validación (en-US) 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`box-shadow` ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase `:invalid` para poder observar un ejemplo que muestra como evitar este estilo por defecto.

Especificaciones
----------------

No es parte de ninguna especificación.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:-moz-ui-valid`