recursal/MDN huggingface dataset:
align-self
==========

Resumen
-------

La propiedad CSS **`align-self`** alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de `align-items`. Si el límite transversal de alguno de los elementos está definido como `auto`, el valor de `align-self` es ignorado.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | flex items, grid items, and absolutely-positioned boxes |
| Heredable | no |
| Valor calculado | `auto` computes to itself on absolutely-positioned elements, and to the computed value of `align-items` on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for `justify-self` (en-US). Otherwise the specified value. |
| Animation type | discrete |

Véase Usando las cajas flexibles CSS para más propiedades e información.

Sintaxis
--------


```css
/\* Valores clave \*/
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/\* Valores globales \*/
align-self: inherit;
align-self: initial;
align-self: unset;
```

### Valores

`auto`

Se calcula acorde al valor de `align-items` del padre, o al de `stretch` si el elemento no tiene padre.

`flex-start`

El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.

`flex-end`

El límite transversal final del elemento flexible es unido al borde transversal final de la línea.

`center`

Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.

`baseline`

Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.

`stretch`

Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.

### Sintaxis formal
```

align-self =   
  auto                                  |  
  normal                                |  
  stretch                               |  
  <baseline-position>                   |  
  <overflow-position>? <self-position>  |  
  anchor-center                           
  
<baseline-position> =   
  [ first | last ]?  &&  
  baseline             
  
<overflow-position> =   
  unsafe  |  
  safe      
  
<self-position> =   
  center      |  
  start       |  
  end         |  
  self-start  |  
  self-end    |  
  flex-start  |  
  flex-end      
  
```

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-self-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

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

* Usando las cajas flexibles CSS
:only-child
===========

La pseudo-clase (en-US) **`:only-child`** de 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 <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
--------

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

### Ejemplo básico

#### HTML


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


```css
main :only-child {
  color: red;
}
```


#### Resultado

### Ejemplo de lista

#### HTML


```html
<ol>
  <li>
    Primero
    <ul>
      <li>Esta lista tiene solo un elemento.</li>
    </ul>
  </li>
  <li>
    Segundo
    <ul>
      <li>Esta lista tiene tres elementos.</li>
      <li>Esta lista tiene tres elementos.</li>
      <li>Esta lista tiene tres elementos.</li>
    </ul>
  </li>
  <ol></ol>
</ol>
```


#### CSS


```css
li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}
```


#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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

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

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`
border-inline-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-inline-start-color`** define el color del borde lógico inicial en línea de un elemento, 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-color` y `border-bottom-color`, o `border-left-color`, y `border-right-color` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
border-inline-start-color: red;
border-inline-start-color: #ee4141;
```


Propiedades relacionadas son `border-block-start-color`, `border-block-end-color`, y `border-inline-end-color`, que define 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'>`

El color del borde. Mira `color`.

### Sintaxis formal
```

border-inline-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-inline-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`, y `border-left-color`
* `writing-mode`, `direction`, `text-orientation`
inset-block-start
=================

**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 **`inset-block-start`** define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad `top`, `right`, `bottom`, o `left` dependiendo de la propiedad en los valores definidos para `modo de escritura`, `dirección` y `orientación de texto`.


```css
/\* <length> values \*/
inset-block-start: 3px;
inset-block-start: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-block-start: 10%;

/\* Keyword value \*/
inset-block-start: auto;

/\* Global values \*/
inset-block-start: inherit;
inset-block-start: initial;
inset-block-start: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-height of containing block |
| Valor calculado | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

La propiedad `inset-block-start` toma los mismos valores de la propiedad `left`.

### Sintaxis formal
```

inset-block-start =   
  auto                 |  
  <length-percentage>    
  
<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;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}
```

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

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

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

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

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

* Las propiedades que definen otras inserciones:: `inset-block-end`, `inset-inline-start`, y `inset-inline-end`
* Las propiedades físicas mapeadas: `top`, `right`, `bottom`, y `left`
* `writing-mode`, `direction`, `text-orientation`
inset-inline-start
==================

**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 **`inset-inline-start`** define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad `top`, `right`, `bottom`, o `left` dependiendo de la propiedad en los valores definidos para `writing-mode`, `direction`, y `text-orientation`.


```css
/\* <length> values \*/
inset-inline-start: 3px;
inset-inline-start: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-inline-start: 10%;

/\* Keyword value \*/
inset-inline-start: auto;

/\* Global values \*/
inset-inline-start: inherit;
inset-inline-start: initial;
inset-inline-start: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

La propiedad `inset-inline-start` toma los mismos valores de la propiedad `left`.

### Sintaxis formal
```

inset-inline-start =   
  auto                 |  
  <length-percentage>    
  
<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;
  position: relative;
  inset-inline-start: 20px;
  background-color: #c8c800;
}
```

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

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

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

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

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

* Las propiedades que definen otras inserciones: `inset-block-start`, `inset-block-end`, y `inset-inline-end`
* Las propiedades físicas mapeadas: `top`, `right`, `bottom`, y `left`
* `writing-mode`, `direction`, `text-orientation`
visibility
==========

### Resumen

La propiedad `visibility` se usa para dos efectos:

1. El valor `hidden` esconde un elemento, pero deja (vacío) el espacio donde debería aparecer.
2. El valor `collapse` esconde filas o columnas de una tabla.

* `Valor incial`: `visible` (en-US)
* Se aplica a: Todos los elementos.
* `Valor heredado`: Sí
* Porcentajes: N/A
* Medio: `visual` (en-US)
* `Valor calculado`: Como se especifica.
### Sintaxis
```

visibility: visible | hidden | collapse | `inherit`
```

### Valores

`visible`

El elemento se muestra normalmente.

`hidden`

El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedad `visibility: visible`, descendientes de ése elemento serán visibles.

`collapse`

Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el código ``display`: none` a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos, `collapse` funciona como `hidden`).

### Ejemplos
```

p        { visibility: hidden; }   /* Los párrafos no serán visibles                       */
p.showme { visibility: visible; }  /* excepto los que tengan class = showme (clase= muéstrame)                */
tr.col   { visibility: collapse; } /* las filas de la tabla con la clasecol se fusionarán*/
```

### Notas

El soporte para `visibility: collapse` no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado como `visibility: hidden` en elementos que no son filas / columnas de una tabla.

`visibility:collapse` puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamente `visibility: visible` en la tabla anidada.

### Especificaciones

* CSS 2.1
### Ver también

`display`
Categorías

Interwiki Languages
border-inline-start-width
=========================

**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-inline-start-width`** define el ancho del borde lógico inicial en línea de un elemento, 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-width` (en-US) y `border-bottom-width`, o `border-left-width` (en-US), y `border-right-width` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <'border-width'> values \*/
border-inline-start-width: 5px;
border-inline-start-width: thick;
```


Propiedades relacionadas son `border-block-start-width`, `border-block-end-width`, and `border-inline-end-width`, que definen los otros anchos del borde del elemento.

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

### Valores

`<'border-width'>`

El ancho del borde. Mira `border-width`.

### Sintaxis formal
```

border-inline-start-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

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: 1px solid blue;
  border-inline-start-width: 5px;
}
```

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

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

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-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, y `border-left-width` (en-US)
* `writing-mode`, `direction`, `text-orientation`
flex-wrap
=========

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 **`flex-wrap`** de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.

|  |  |
| --- | --- |
| Valor inicial | `nowrap` |
| Applies to | flex containers |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Ver Usando cajas flexibles CSS para conocer más propiedades e información.

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

Sintaxis formal: 
```
flex-wrap =   
  nowrap        |  
  wrap          |  
  wrap-reverse    
  
```


```
```

flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse

flex-wrap: inherit
```

### Valores

Se aceptan los siguientes valores:

`nowrap`

Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor **cross-start** es equivalente a **start** o **before** según el valor de `flex-direction`.

`wrap`

Los elementos flex son colocados en varias líneas. El valor **cross-start** equivale a **start** o **before** dependiendo del valor `flex-direction` y **cross-end** implicaría lo opuesto a lo especificado por **cross-start**.

`wrap-reverse`

Actúa como `wrap` pero **cross-start** y **cross-end** están intercambiados.

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

element {
  flex-wrap: nowrap;
}
```

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

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

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

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

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

* Usando cajas flexibles CSS
-moz-user-modify
================

**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 `-moz-user-modify` determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo `contenteditable` . `user-focus` , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

¡Valor no encontrado en la base de datos!Síntaxis
--------


```css
/\* Palabras clave valor \*/
-moz-user-modify: read-only;
-moz-user-modify: read-write;
-moz-user-modify: write-only;

/\* Valores globales \*/
-moz-user-modify: inherit;
-moz-user-modify: initial;
-moz-user-modify: unset;
```

### Valores

read-only

Valor por defecto. El contenido sólo se puede leer.

read-write

El usuario puede leer y escribir contenidos.

write-only

El usuario puede editar el contenido pero no leerlo.

### Síntaxis Formal

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

### CSS


```css
.readwrite {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
}
```

### HTML


```html
<div class="readwrite">El usuario puede cambiar este texto.</div>
```

### Result

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

`user-modify` en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por *CSS 3 UI*)

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

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

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

* `-moz-user-focus`
* `-moz-user-input`
* `-moz-user-select` (en-US)
:valid
======

La pseudo-clase **`:valid`** de CSS representa cualquier elemento `<input>` u otro elemento `<form>` cuyo contenido se valide (en-US) 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 <input> válido \*/
input:valid {
  background-color: powderblue;
}
```


Esta pseudo-clase es útil para resaltar los campos correctos para el usuario.

Sintaxis
--------

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

Ver `: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.

* MDN Comprensión de las WCAG, explicaciones de la Guía 1.4
* Comprender el Criterio de Conformidad 1.4.1 | W3C Comprender WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-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`, `:optional`, `:invalid`
* Validación de datos de formulario (en-US)
Texto CSS
=========

**Texto CSS** es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

Referencia
----------

### Propiedades

* `hyphens`
* `letter-spacing` (en-US)
* `line-break` (en-US)
* `overflow-wrap` (en-US)
* `tab-size` (en-US)
* `text-align`
* `text-align-last` (en-US)
* `text-indent` (en-US)
* `text-size-adjust` (en-US)
* `text-transform`
* `white-space`
* `word-break` (en-US)
* `word-spacing` (en-US)
* `word-wrap` (en-US)
Guías
-----

*None.*

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |
font-variant
============

Resumen
-------

La propiedad `font-variant` selecciona entre los aspectos `normal` y `small-caps` para la `familia de fuente` determinado.

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

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

font-variant: [normal | small-caps] ;
```

### Valores

normal

Especifica un aspecto de letra normal.


small-caps

Especifica un tipo de letra que está declarado como tipo de letra small-caps. Si no hay un tipo de letra small-caps disponible, Mozilla simulará un tipo de letra small-caps, por ejemplo tomando un tipo de letra normal y reemplazando las letras en minúsculas por caracteres en mayúsculas escalados.

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

h1 { font-variant: small-caps }
p { font-variant: small-caps}
```

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

* Fuentes en CSS 2 (en)
* Fuentes en CSS 3 (en)