recursal/MDN huggingface dataset:
-webkit-touch-callout
=====================

**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-touch-callout` controla la visualización de la llamada predeterminada que se muestra cuando se mantiene pulsado un objetivo táctil .

Cuando se toca y se mantiene la presión en un objetivo en iPhone OS, Safari muestra un un cuadro con información sobre el enlace. Esta propiedad permite deshabilitar este comportamiento.

Síntaxis
--------


```css
/\* Palabras clave valor \*/
-webkit-touch-callout: default;
-webkit-touch-callout: none;

/\* Valores globales \*/
-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: unset;
```

### Valores

`default`

Se muestra el cuadro de información por defecto.

`none`

El cuadro está deshabilitado

### Síntaxis Formal

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


```css
.example {
  -webkit-touch-callout: none;
}
```

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

No es parte de ninguna especificación.

Apple tiene una descripcón en la Referencia CSS de Safari.

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

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

La pseudo-clase **`:optional`** de CSS representa cualquier elemento `<input>`, `<select>`, o `<textarea>` que no tenga el atributo `required` establecido en él.


```css
/\* 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 `:required` selecciona los campos de formulario *requeridos*.

Sintaxis
--------

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

Ver `:invalid` para un ejemplo.

Problemas de accesibilidad
--------------------------

Si un formulario contiene `<input>`s opcionales, las entradas requeridas deben indicarse utilizando el atributo `required`. 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.

* MDN Understanding WCAG, Guideline 3.3 explanations (en-US)
* Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # selector-optional |
| Selectors Level 4 # opt-pseudos |

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

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

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

* Otras pseudo-clases relacionadas con la validación: `:required`, `:invalid`, `:valid`
* Validación de datos de formulario (en-US)
::-webkit-meter-bar
===================

**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 `::-webkit-meter-bar` establece el estilo para el fondo del elemento meter que contiene el valor.

Ejemplos
--------


```html
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
```



```css
meter {
  /\* Resetea a la apariencia por defecto \*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

meter::-webkit-meter-bar {
  background: #eee;
  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
  border-radius: 3px;
}
```


**Nota:** Sólo funciona en navegadores basados en Webkit/Blink.

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

Los pseudo-elementos usados en WebKit/Blink para dar estilos a otras partes del elemento `<meter>` (en-US) :

* `::-webkit-meter-inner-element`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
:right
======

La pseudo-clase CSS **`:right`**, utilizada con la regla-at `@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 `:left`.

**Nota:** No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades `margin`, `padding`, `border`, y `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
--------

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


```css
@page :right {
  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 páginas relacionadas con la pseudo-clases: `:first`, `:left`
min-width
=========

### Sumario

La propiedad `min-width` se usa para determinar la anchura mínima de un elemento. Previene que la propiedad `width` pueda ser inferior que `min-width`.

* Valor inicial: 0
* Aplicable a: elementos de tipo bloque.
* Heredable: no
* Porcentajes: se refieren a la anchura del bloque contenedor.
* Media: `visual` (en-US)
* Valor calculado:
### Sintaxis

min-width: <longitud> | <porcentaje> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

### Valores

* **length** : puede ser expresado en px, cm, in
* **percentage** : expresado con "%" es un porcentaje del ancho del elemento contenedor.
* **-moz-max-content** : el ancho intrínseco preferido
* **-moz-min-content** : el ancho intrínseco mínimo
* **-moz-available** : el ancho del contenedor menos el margen horizontal, borde y padding
* **-moz-fit-content** : igual que `-moz-min-content`
### Ejemplos
```

table{min-width: 75%;}

form{min-width: 0;}
```

### Notas

`min-width` sobrescribe los valores de `max-width` (en-US) y `width`.

### Especificaciones

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

### Compatibilidad con navegadores

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

### Ver también

box model, `min-height`, `-moz-box-sizing` (en-US), `width`, `max-width` (en-US)
:has
====

Baseline 2023
-------------

Newly availableSince December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen
-------

La pseudo-class CSS **`:has()`** representa un elemento si cualquiera de los selectores, en relación con el `:scope` (en-US) del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase `:has()` tomo un selector como argumento.

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

:has(selector_list) { propiedades de estilo }
```

Ejemplos
--------

El siguiente selector selecciona únicamente los elementos `<a>` que contienen `<img>` hijo:


```css
a:has(> img) {
}
```

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

| Specification |
| --- |
| Selectors Level 4 # relational |

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

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

**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-crashed` selecciona elementos que no pueden ser mostrados porque el plugin para dibujarlos ha dejado de funcionar.

Es útil principalmente para los desarrolladores de temas.

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

* `:-moz-handler-blocked`
* `:-moz-handler-disabled`
border-block-start-color
========================

**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-color`** define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-color`, `border-right-color` (en-US), `border-bottom-color`, o `border-left-color` dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
border-block-start-color: blue;
border-block-start-color: #4c5d21;
```


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

|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | computed color |
| Animation type | by computed value type |

### Valores

`<'color'>`

Mira `border-color`

### Sintaxis formal
```

border-block-start-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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: 10px solid blue;
  border-block-start-color: red;
}
```

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

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

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-color`, `border-right-color` (en-US), `border-bottom-color`, o `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`
:focus
======

La pseudo-clase **`:focus`** CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.


```css
/\* Selecciona cualquier <input> cuando se enfoca \*/
input:focus {
  color: red;
}
```


**Nota:** Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice `:focus-within` si desea seleccionar un elemento que contenga un elemento enfocado.

Sintaxis
--------

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

### HTML


```html
<input
 class="red-input"
 value="Voy a ser de color rojo cuando enfoque." /><br />
<input class="blue-input" value="Voy a ser de color azul cuando enfoque." />
```

### CSS


```css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}
```

### Resultado

Sobre Accesibilidad
-------------------

Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de WCAG 2.1 requiere que el indicador de foco tenga un contraste de por lo menos 3:1.

* Indicadores de foco accesibles (en inglés): Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### :focus { outline: none; }

Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.

* Más información (en inglés): Never remove CSS outlines
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

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

* `:focus-within`
Selectores de hermanos adyacentes
=================================

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

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

elemento_anterior + elemento_afectado { estilos }
```

Ejemplo
-------

### CSS


```css
li:first-of-type + li {
  color: red;
}
```

### HTML


```html
<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

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

* Selectores de hermanos generales
flex-flow
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Resumen
-------

La propiedad CSS **`flex-flow`** es una propiedad atajo para las propiedades individuales `flex-direction` y `flex-wrap`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| Applies to | flex containers |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `flex-direction`: como se especifica
* `flex-wrap`: como se especifica
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

Para más propiedades e información ve Utilizando cajas flexibles CSS (en-US).

Sintaxis
--------


```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> and <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/\* valores globales \*/
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;
```

### Valores

Ve `flex-direction` (en-US) y `flex-wrap` (en-US) para más detalles de los valores.

### Sintaxis formal
```

flex-flow =   
  <'flex-direction'>  ||  
  <'flex-wrap'>         
  
```

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

element {
  /* Main-axis es la dirección de bloque con main-start y main-end opuesto. Los artículos flex se distribuyen en múltiples líneas */
  flex-flow: column-reverse wrap;
}
```

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |

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

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

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

* Utilizando cajas flexibles CSS (en-US)
::marker
========

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

El pseudo-elemento **`::marker`** en CSS selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número. Funciona en cualquier elemento o pseudo-elemento configurado para `display: list-item`, como el elemento `<li>` y `<summary>` (en-US).


```css
::marker {
  color: blue;
  font-size: 1.2em;
}
```

Propiedades permitidas
----------------------

Sólo ciertas propiedades CSS puedes utilizarse en una regla con `::marker` como selector:

* Todas las propiedades de fuentes
* `color`
* La propiedad `text-combine-upright` (en-US), `unicode-bidi` (en-US) y `direction`
* La propiedad `content`

**Nota:** En la especificación se indica que en el futuro de pueden admitir propiedades CSS adicionales.

Sintaxis
--------

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

### HTML


```html
<ul>
  <li>Duraznos</li>
  <li>Manzanas</li>
  <li>Ciruelas</li>
</ul>
```

### CSS


```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

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

* Elementos HTML que tienen marcadores por defecto: `<ol>`, `<li>`, `<summary>` (en-US)
Valor inicial
=============

<< Volver

### Resumen

El **Valor inicial** dado en el resumen de cada definición de propiedad CSS tiene un significado distinto según se trate de propiedades heredadas o no heredadas.

Para propiedades heredadas, se usa el valor inicial, para el elemento raíz **solamente**, cuando no se ha especificado ningún valor para el elemento.

Para propiedades no heredadas se usa el valor inicial para **todos** los elementos, cuando no se especificó nigún valor para el elemento.

En CSS3 se propuso el valor `initial` para permitir a los autores especificar explícitamente éste valor inicial.

### Ver también

Propiedades heredadas y no heredadas, `initial`

Categorías

Interwiki Languages
:last-child
===========

La pseudo-clase **`:last-child`** de CSS representa el último elemento entre un grupo de elementos hermanos.


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

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

### Ejemplo básico

#### HTML


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


```css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### Resultado

### Diseñando una lista

#### HTML


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


```css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}
```


#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

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

* `:last-of-type`, `:first-child`, `:nth-child`
::-moz-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-page-sequence` sirve para representar el fondo de la previsualización de impresión.

Ejemplos
--------

Necesita un eejemplo

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-scrolled-page-sequence`
Los selectores descendientes
============================

Sumario
-------

El `␣` combinador (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a selectores hijos , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.

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

selector1 selector2 { propiedades de estilos }
```

Ejemplo
-------


```css
span {
  background-color: white;
}
div span {
  background-color: DodgerBlue;
}
```



```html
<div>
  <span
 >Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

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