recursal/MDN huggingface dataset:
content
=======

<< Volver

### Resumen

La propiedad `content` se usa junto con los pseudo-elementos `:before` y `:after` para generar contenido que se adjunta antes o después de un selector CSS.

### Características

En **CSS3**

* Value: [ <uri> ',' ]</uri>\* [ normal | none | inhibit | <content-list> ]</content-list>
* Valor inicial: normal
* Se aplica a: todos los elementos y a `::before, ::after, ::alternate, ::marker, ::line-marker, áreas de margin y @footnote`.
* `Valor heredado`: no
* Porcentajes: N/A
* Medio: todos
* Valor calculada: The specified value with each occurrence of 'normal' expanded as per the prose below.
### Ejemplos
```

p:before
{
content: url("beep.wav")
}

img:before
{
content: attr(alt)
}
```

### Valores

* string: Define el contenido de texto. El valor por defecto es "".
* url: Define una dirección URL
* counter (name)
* counter (name, list-style-type)
* counters (name, string)
* counters (name, string, list-style-type)
* attr(X): Define un atributo de un selector que será mostrado antes/después del selector.
* open-quote
* close-quote
* no-open-quote
* no-close-quote
### Ver también

(CSS2 en)
(CSS2 1 en)
(CSS3 en)

Categorías

Interwiki Languages
left
====

La propiedad `left` especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

Para los elementos con una posición absoluta (aquellos que tienen la propiedad `position``: absolute` ó `position: fixed`), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

Pruébalo
--------

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | refer to the width of the containing block |
| Valor calculado | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------
```

left: <length> | <percentage> | auto | inherit ;
```

### Valores

`<length>`

Una longitud, un valor negativo, cero, un valor positivo.

`<percentage>`

Un porcentaje del ancho del bloque contenedor.

Ejemplos
--------

### CSS


```css
#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example\_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example\_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example\_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example\_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}
```

### HTML


```html
<div id="wrap">
  <div id="example\_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example\_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example\_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example\_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>
  </div>
</div>
```

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

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

* `position`, `top`, `right`, `bottom`
:-moz-last-node
===============

**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-last-node` selecciona un elemento si es el último nodo hijo de algún otro elemento. Se diferencia de `:last-child` en que no selecciona el último elemento hijo si tiene texto (sin contar espacios en blanco) después de él.

**Nota:** Cualquier espacio en blanco al final de un elemento se ignora al usar `:-moz-last-node`.

Síntaxis
--------
```

span:-moz-last-node {propiedades del estilo }
```

Ejemplo
-------

### CSS


```css
span:-moz-last-node {
  background-color: lime;
}
```

### HTML


```html
<div>
  <span>:-moz-first-node</span>
  <span>:-moz-last-node</span>
</div>
```

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

* `:-moz-first-node`
* `:last-child`
::-moz-range-progress
=====================

**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-progress`** representa la parte del "camino" (la ranura sobre la que desliza) de un elemento `<input>` con `type="range"`, que se corresponde con los valores inferiores al valor seleccionado actualmente en ese "camino".

**Nota:** Si usamos `::-moz-range-progress` con cualquier otra cosa que no sea `<input type="range">` ni seleccionaremos nada ni conseguiremos ningún efecto.

Síntaxis
--------

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

### Contenido CSS


```css
input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}
```

### Contenido HTML


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

### Salida

Una barra de progreso que utilice este estilo se vería de la siguiente manera:

![](/es/docs/Web/CSS/::-moz-range-progress/screen_shot_2015-12-04_at_20.14.48.png)

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

No es parte de ninguna especificación. Es 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
----------

* El pseudo-elements que usa Gecko para dar estilo a otras parte de un input con type="range":
    + `::-moz-range-thumb`
    + `::-moz-range-track`
* `::-ms-fill-upper`
* CSS-Tricks: Dando estilo con CSS a input con type="range" en todos los navegadores.
* QuirksMode: Dando estilo y usando scripts para elementos deslizantes.
border-left
===========

Resumen
-------

El `borde_izquierdo` es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : `border-left-width` (en-US), `border-left-style` (en-US), `border-left-color`. Valores omitidos son puestos a su valor inicial.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `border-left-width` (en-US): `medium`
* `border-left-style` (en-US): `none`
* `border-left-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `border-left-width` (en-US): the absolute length or `0` if `border-left-style` (en-US) is `none` or `hidden`
* `border-left-style` (en-US): como se especifica
* `border-left-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-left-color`: a color
* `border-left-style` (en-US): discrete
* `border-left-width` (en-US): a length
 |

Sintaxis
--------
```

border-left: [border-width || border-style || border-color | inherit] ;
```

### Valores

border-width

See `border-width`.

border-style

See `border-style`.

border-color

See `border-color`.

Ejemplos
--------


```css
element {
  border-left: 1px solid #000;
}
```

Notas
-----

Si las reglas no especifican un color de borde, el borde tendrá la propiedad `color`

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:-moz-handler-blocked
=====================

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

`:-moz-handler-blocked` selecciona elementos que no pueden ser mostrado por haber sido sus manejadores bloqueados.

Es útil principalmente para los desarrolladores de temas.

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

* `:-moz-handler-crashed`
* `:-moz-handler-disabled`
-moz-image-region
=================

**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.

*Para sistemas que funcionan con cualquier fondo ver `-moz-image-rect()`.*

Resumen
-------

Para cierto elementos y pseudo-elementos XUL que usan una imagen para la propiedad `list-style-image`, esta propiedad especifica la parte de una imagen que es usada en lugar en vez de la imagen completa. Esto permite a los elementos usar diferentes partes de la misma imagen para mejorar el rendimiento.

La síntaxis es similar a la síntaxis de la propiedad `clip`. Los 4 valors son relativos la esquina superior izquierda de la imagen.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | XUL `image` elements and `:-moz-tree-image`, `:-moz-tree-twisty`, and `:-moz-tree-checkbox` pseudo-elements. **Note:** `-moz-image-region` only works with `image` elements where the icon is specified using `list-style-image`. It will not work with XUL `<image src="url" />`. |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | discrete |

Síntaxis
--------

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


```css
#example-button {
  /\* muestra sólo el área 4x4 desde la esquina izquierda de esta imagen \*/
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /\* muestra sólo el área 4x4 a la derecha del primero para cuando pongamos el ratón sobre el botón \*/
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}
```
animation-iteration-count
=========================

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

Resumen
-------

La propiedad CSS `animation-iteration-count` define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.

A menudo es conveniente utilizar la propiedad `animation` para ajustar todas las propiedades de animación a la vez.

|  |  |
| --- | --- |
| Valor inicial | `1` |
| Applies to | todos los elementos y los pseudoelementos `::before` y `::after` |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------
```

Sintaxis formal: 
```
animation-iteration-count =   
  <single-animation-iteration-count>#    
  
<single-animation-iteration-count> =   
  infinite        |  
  <number [0,∞]>    
  
```


animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;
```

### Valores

`infinite`

La animación se repetirá siempre.

`<number>`

El número de veces que la animación debe repetir: es 1 por defecto. Los valores negativos no son validos. Puede especificar valores no enteros para ejecutar parte de un ciclo de animación (por ejemplo 0.5 se ejecutara la mitad del ciclo de la animación).

Ejemplos
--------

Ver ejemplos CSS animations (en-US).

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

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

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

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

* Usando animaciones CSS (en-US)
* `AnimationEvent`
border-block-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-style`** CSS property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-style` (en-US) y `border-bottom-style`, o `border-left-style` (en-US), y `border-right-style` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.


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


El estilo del borde en otra dimensión puede establecerse con `border-inline-style`, que establece `border-inline-start-style`, y `border-inline-end-style`.

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

Sintaxis
--------

### Valores

`<'border-style'>`

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

### Sintaxis formal
```

border-block-style =   
  <'border-top-style'>{1,2}    
  
```

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-style: dashed;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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`
:left
=====

La **`:left`** CSS pseudo-clase, 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
--------

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


```css
@page :left {
  margin: 2in 3in;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

Ver También
-----------

* `@page`
* Otras pseudo-clases relacionadas con la página: `:first`, `:right`
:first-of-type
==============

La pseudo-clase **`:first-of-type`** de CSS representa el primer elemento de su tipo entre un grupo de elementos hermanos.


```css
/\* Selecciona cualquier <p> que sea el primer elemento
 de este tipo entre sus hermanos \*/
p:first-of-type {
  color: red;
}
```


**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 itemEjemplos
--------

### Diseñando el primer párrafo

#### HTML


```html
<h2>Encabezado</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
```


#### CSS


```css
p:first-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 primero</span>!</div>
  <div>
    ¡Este <em>`em` anidado es el primero</em>, pero este
    <em>`em` anidado es el último</em>!
  </div>
  <div>¡Este <span>`span` anidado tiene estilo</span>!</div>
  <b>¡Este `b` califica!</b>
  <div>Este es el `div` final.</div>
</article>
```


#### CSS


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


#### Resultado

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

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

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

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

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

* `:first-child`, `:last-of-type`, `:nth-of-type`
<time>
======

El tipo de dato **`<time>`** de CSS representa un valor de tiempo expresado en segundos o milisegundos. Se usa en `animation`, `transition` y propiedades relacionadas.

Sintaxis
--------

El tipo de datos `<time>` consta de un `<number>` seguido de una de las unidades enumeradas a continuación. Opcionalmente, puede estar precedido por un solo signo `+` o `-` . Al igual que con todas las dimensiones, no hay espacio entre la unidad literal y el número.

**Nota:** Aunque el número `0` es siempre el mismo independientemente de la unidad, la unidad no se puede omitir. En otras palabras, `0` no es válido y no representa `0s` o `0ms`.

### Unidades

**`s`**

Representa un tiempo en segundos. Ejemplos: `0s`, `1.5s`, `-60s`.

**`ms`**

Representa un tiempo en milisegundos. Ejemplos: `0ms`, `150.25ms`, `-60000ms`.


**Nota:** Nota: La conversión entre `s` y `ms` sigue la lógica `1s` = `1000ms`.

Ejemplos
--------

### Tiempos válidos
```

12s         Entero positivo
-456ms      Entero negativo
4.3ms       No entero
14mS        La unidad no distingue entre mayúsculas y minúsculas, aunque no se recomiendan letras mayúsculas.
+0s         Cero con un signo + y una unidad
-0ms        Cero con un signo - y una unidad
```

### Tiempos inválidos
```

0           Aunque el cero sin unidades está permitido para <length>, no es válido para <time>.
12.0        Este es un <number>, no un <time>, porque le falta una unidad.
7 ms        No se permite espacio entre el número y la unidad.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # time |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-mask-repeat
===================

**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 -webkit-mask-repeat` especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

|  |  |
| --- | --- |
| Valor inicial | `repeat` |
| 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 | Consists of two keywords, one per dimension |
| Animation type | discrete |

Síntaxis
--------


```css
/\* Palabras clave de valor únicas \*/
-webkit-mask-repeat: repeat;
-webkit-mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-y;
-webkit-mask-repeat: no-repeat;

/\* Palabras clave de valor mútiple \*/
-webkit-mask-repeat: repeat, repeat-x, no-repeat;

/\* Valores globlaes \*/
-webkit-mask-repeat: inherit;
-webkit-mask-repeat: initial;
-webkit-mask-repeat: unset;
```

Valores
-------

repeat

La máscara de imagen se repite tanto vertical como horizontalmente.

repeat-x

La imagen de máscara de repite sólo horizontalmente.

repeat-y

La imagen de máscara de repite sólo verticalemente.

no-repeat

La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.

### Síntaxis Formal
```

mask-repeat =   
  <repeat-style>#    
  
<repeat-style> =   
  repeat-x                                     |  
  repeat-y                                     |  
  [ repeat | space | round | no-repeat ]{1,2}    
  
```

Ejemplos
--------


```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat: repeat-x;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat: no-repeat;
}
```

### Soporte para múltiples imágenes de máscara

Se puede especificar, seperados por comas, un `<repeat-style>` para cada una de las imágenes de máscara:


```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat: repeat-x, repeat-y;
}
```


Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

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-box-image`, `-webkit-mask-clip`, `-webkit-mask-origin`, `-webkit-mask-attachment`, `-webkit-mask-image`, `-webkit-mask-composite`