recursal/MDN huggingface dataset:
:dir()
======

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

La pseudo-clase `:dir` de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.


```css
/\* Selecciona cualquier elemento con texto de derecha a izquierda \*/
:dir(rtl) {
  background-color: red;
}
```


La pseudo-clase `:dir()` usa solo el valor *semántico* de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del *estilo*, es decir, la direccionalidad establecida por las propiedades de CSS como `direction`.

**Nota:** Tenga en cuenta que el comportamiento de la pseudo-clase `:dir()` no es equivalente a los selectores de atributo `[dir=...]`. Estos últimos coinciden con el atributo HTML `dir` e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, `[dir=rtl]` y `[dir=ltr]` no coincidirán con el valor `auto`.) En contraste, `:dir()` coincidirá con el valor calculado por user agent (en-US), incluso si se hereda.

**Nota:** En HTML, la dirección está determinada por el atributo `dir` . Otros tipos de documentos pueden tener diferentes métodos.

Sintaxis
--------

La pseudoclase `:dir()` requiere un parámetro, que representa la direccionalidad de texto que desea orientar.

### Parámetros

`ltr`

Orientar elementos de izquierda a derecha.

`rtl`

Orientar elementos de derecha a izquierda.

### Sintaxis formal

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

### HTML


```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

### CSS


```css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-ltr |
| Selectors Level 4 # the-dir-pseudo |

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

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

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

* Pseudo-clases relacionadas con el idioma: `:lang`, `:dir`
resize
======

Resumen
-------

La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------


```css
/\* Keyword values \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;

/\* Global values \*/
resize: inherit;
resize: initial;
resize: unset;
```

### Valores

`none`

El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento.

`both`

El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente.

`horizontal`

El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente.

`vertical`

El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente.


**Nota:** `resize` no aplica abloques en los cuales la propiedad `overflow` es configurada como `visible`.

### Sintaxis formal
```

resize =   
  none        |  
  both        |  
  horizontal  |  
  vertical    |  
  block       |  
  inline        
  
```

Ejemplos
--------

### Deshabilitando la capacidad de cambio de tamaño de areas de texto

#### CSS

Por defecto, los elementos `<textarea>` permiten cambiar el tamaño en Gecko 2.0 (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:


```css
textarea.example {
  resize: none; /\* disables resizability \*/
}
```


#### HTML


```html
<textarea class="example">Type some text here.</textarea>
```


#### Result

### Utilizando resize con elementos arbitrarios

Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque `<div>` contiene un parrafo (elemento `<p>`) que permite cambiar su tamaño:

#### CSS


```css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}
```


#### HTML


```html
<div class="resizable">
  <p class="resizable">
    This paragraph is resizable, because the CSS resize property is set to
    'both' on this element.
  </p>
</div>
```


#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # resize |

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

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

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

* `<textarea>`
padding-inline-end
==================

**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 **`padding-inline-end`** define el relleno final lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades `padding-top`, `padding-right` (en-US), `padding-bottom`, o `padding-left` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Esto se relaciona con `padding-block-start`, `padding-block-end`, and `padding-inline-start`, que define los otros rellenos del elemento.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
padding-inline-end: 10px; /\* An absolute length \*/
padding-inline-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-inline-end: inherit;
padding-inline-end: initial;
padding-inline-end: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | as `length` |
| Animation type | a length |

### Valores

La propiedad `padding-inline-end` toma los mismos valores de la propiedad `padding-left` (en-US).

### Sintaxis formal
```

padding-inline-end =   
  <'padding-top'>    
  
```

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;
  padding-inline-end: 20px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-properties |

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

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

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

* Las propiedades físicas mapeadas: `padding-top`, `padding-right` (en-US), `padding-bottom`, y `padding-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`
-webkit-box-reflect
===================

**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-box-reflect` permite reflejar el contenido del elemento en una dirección específica.

**Advertencia:** **Nota:** Esta característica **no está pensada para ser usada en páginas Web** .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS `element()` (en-US) .

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

Síntaxis
--------


```css
/\* Valores para la dirección \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* Valor del desplazamiento \*/
-webkit-box-reflect: below 10px;

/\* Valor de máscara \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* Valores globales \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;
```

### Valores

`above`*,* `below`*,* `right`*,* `left`

Son palabras clave que indican en qué dirección se realiza la reflexión.

`<length>`

Indica el tamaño de la reflexión.

`<image>`

Describe la máscara que se aplicará a la reflexión.

### Síntaxis Formal

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

Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función `element()` (en-US).

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

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

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

* La documentación de Apple.
* La especificación de Webkit.
* El artículo de Lea Verou sobre reflexión usando característica CSS que están en el estándar.
border-block-end
================

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

La propiedad CSS **`border-block-end`** es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. `border-block-end` puede ser usada para establecer los valores de una o más de las siguientes propiedades: `border-block-end-width`, `border-block-end-style`, `border-block-end-color`. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades `border-top`, `border-right`, `border-bottom`, o `border-left`, dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.


```css
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;
```


Está relacionada con `border-block-start`, `border-inline-start`, y `border-inline-end`, las cuales definen el borde contrario del elemento.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `border-top-width` (en-US): `medium`
* `border-top-style` (en-US): `none`
* `border-top-color`: `currentcolor`
 |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `border-top-width` (en-US): the absolute length or `0` if `border-top-style` (en-US) is `none` or `hidden`
* `border-top-style` (en-US): como se especifica
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-end-color`: by computed value type
* `border-block-end-style`: discrete
* `border-block-end-width`: by computed value type
 |

Sintaxis
--------

### Valores

Una o más de los siguientes, en cualquier orden:

`<'border-width'>`

Véase `border-width`

`<'border-style'>`

Véase `border-style`

`<'color'>`

Véase `color`

### Sintaxis formal
```

border-block-end =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Texto de ejemplo</p>
</div>
```

### Contenido CSS


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

.exampleText {
  writing-mode: vertical-rl;
  border-block-end: 5px dashed blue;
}
```

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

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

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

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

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

* Las propiedades físicas mapeadas: `border-top`, `border-right`, `border-bottom`, y `border-left`
* `writing-mode`, `direction`, `text-orientation`
z-index
=======

Resumen
-------

La propiedad CSS `z-index` indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.

Para una caja posicionada (es decir, una con cualquier `position` aparte de `static`), la propiedad `z-index` especifica:

1. El nivel de apilamiento en el actual contexto de apilado.
2. Si la caja establece un contexto de apilamiento local.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | an integer |
| Creates stacking context | yes |

Syntax
------
```

z-index:  auto | <entero> | inherit
```

### Values

auto

La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.

<integer>

Este entero es el nivel de apilamiento de la caja generada en el actual contexto de apilamiento. La caja además establece un contexto de apilamiento en el que el nivel de apilamiento es 0. Esto significa que los z-index de los elementos descendientes no son comparados con los elementos que están fuera de este elemento.

Ejemplos
--------
```

<div
 style="border: dashed; position: relative; height: 8em; margin-bottom: 1em; margin-top: 2em;">
  position:relative; z-index:1;
  <span style="background: gold; left: 60px; position: absolute; top: 3em;"
 >position:absolute; z-index:2; left:60px; top:3em;</span
 >
  <span
 style="background: lightgreen; height: 7em; left: 20em; opacity: 0.9; position: absolute; top: -25px;"
 >position:absolute; z-index:3;<br />
    left:20em; top:-25px; opacity:0.9</span
 >
</div>
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

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

* Propiedad CSS `position`
* Entendiendo la propiedad CSS z-index
<percentage>
============

Sumario
-------

Los tipos de dato `<porcentaje>` de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje `%`. No hay un espacio entre el '%' y el numero.

Varias propriedades de longitud usan porcentajes, tales como `width, margin` y `padding`. Los porcentajes tambien se pueden ver en `font-size`, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

**Nota:** Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor `<length>,`sera accesible en la propiedad heredada, no el valor porcentual.

Interpolación
-------------

Los valores del tipo de dato `<porcentaje>` de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

Examples
--------

#### Usando `margin` y `width`


```html
<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```


El codigo de arriba se va a renderizar así:

#### Usando `font-size`


```html
<div style="font-size:18px;">
  Full size text (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div>
```


El codigo de arriba de renderizara así:

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

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

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

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

**Obsoleto:** Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

Resumen
-------

La propiedad de CSS `clip` define qué porción de un elemento es visible. La propiedad `clip` se aplica solamente sobre elementos con `position:absolute` o `position:fixed`.

**Advertencia:** This property is deprecated. Use `clip-path` (en-US) instead.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | absolutely positioned elements |
| Heredable | no |
| Valor calculado | `auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise |
| Animation type | a rectangle |

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

Sintaxis formal: 
```
clip =   
  <rect()>  |  
  auto        
  
<rect()> =   
  rect( <top> , <right> , <bottom> , <left> )    
  
```


```
```

clip: rect(1px, 10em, 3rem, 2ch)
clip: auto

clip: inherit
```

### Valores

`<shape>`

Una forma rectangular del formulario
```

rect(<top>, <right>, <bottom>, <left>)   /* sintaxis estándar */
```


o
```

rect(<top> <right> <bottom> <left>)      /* sintaxis compatible inversa */
```


donde `<top>` y `<bottom>` especifícan desplazamientos de la *esquina del borde superior* de la caja, y `<right>`, y `<left>` especifican desplazamientos de la *esquina del borde izquiedo* de la caja.

`<top>`, `<right>`, `<bottom>`, y `<left>` pueden cada uno tenerun valor `<length>` o `auto`.

`auto`

El elemento no se recorta (valor por defecto)

Ejemplos
--------


```css
p {
  border: dotted;
  position: relative;
}

#img2 {
  position: absolute;
  left: 263px;

  clip: rect(40px, 200px, 150px, 30px);
  /\* sintáxis estándar, no soportada por Internet Explorer 4-7 \*/
}

#img3 {
  position: absolute;
  left: 526px;

  clip: rect(40px 200px 150px 30px);
  /\* sintáxis no-estándar, pero soportada por todos los exploradores importantes incluyendo Firefox y IE \*/
}
```


![hut.jpg](/es/docs/Web/CSS/clip/hut.jpg)
![hut.jpg](/es/docs/Web/CSS/clip/hut.jpg)
![hut.jpg](/es/docs/Web/CSS/clip/hut.jpg)

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

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

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

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

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

* Propiedades CSS relacionadas: `text-overflow`, `white-space`, `overflow-x` (en-US), `overflow-y`, `overflow`, `display`, `position`
:link
=====

La pseudo-clase **`:link`** CSS representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado `<a>`, `<area>`, o `<link>` que tiene un atributo `href`.


```css
/\* 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 (`:active`, `:hover`, o `: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 `:any-link` para seleccionar un elemento independientemente de si ha sido visitado o no.

Sintaxis
--------

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

Por defecto, la mayoría de los navegadores aplican un valor especial `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 `background-color` permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.

### HTML


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


```css
a:link {
  background-color: gold;
  color: green;
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

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

* Pseudo-clases relacionadas con enlaces: `:visited`, `:hover`, `:active`
::-webkit-scrollbar
===================

Resumen
-------

El pseudo-elemento CSS ::-webkit-scrollbar afecta el estilo de la barra de desplazamiento asociada a un elemento.

**Nota:** `::-webkit-scrollbar` sólo está disponible en navegadores basados en WebKit (p.e., Google Chrome).

Ejemplo
-------


```css
.visible-scrollbar,
.invisible-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}
```



```html
<div class="visible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>
<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>
```