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

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

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

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

La función **`var()`** puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

Sintaxis
--------

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.
```

<var()> =   
  var( <custom-property-name> , <declaration-value>? )    
  
```

### Valores

<custom-property-name>

El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.

<declaration-value>

El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .

Ejemplos
--------


```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```



```css
/\* Fallback \*/
/\* En el estilo del componente: \*/
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* En el estilo de la aplicación: \*/
.component {
  --text-color: #080; /\* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback \*/
}
```

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

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

* Usando variables CSS
:lang
=====

La pseudo-clase **`:lang()`** de CSS es utilizada para modificar elementos en función del idioma en el que se determina que están.


```css
/\* Selecciona cualquier <p> en inglés (en) \*/
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```


**Nota:** En HTML, el lenguaje está determinado por una combinación del atributo `lang`, el elemento `<meta>` y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.

Sintaxis
--------

### Sintaxis formal

Error: could not find syntax for this item### Parámetro

`<language-code>`

Un `<string>` (en-US) que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones HTML.

Ejemplo
-------

En este ejemplo, la pseudo-clase `:lang()` se usa para hacer coincidir los elementos primarios de los elementos de cita (`<q>`) utilizando selectores de hijo. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de Unicode se utilizan para especificar algunos de los caracteres de comillas especiales.

### HTML


```html
<div lang="en">
  <q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q>
</div>
<div lang="fr">
  <q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q>
</div>
<div lang="de">
  <q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q>
</div>
```

### CSS


```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # lang-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 lenguaje: `:lang`, `:dir`
* Atributo HTML `lang`
* BCP 47 - Etiquetas para identificar idiomas
-moz-float-edge
===============

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

La propiedad CSS no estandarizada **`-moz-float-edge`** especifica si las propiedades `height` y `width` del elemento incluyen el grosor del margen, borde, o relleno.


```css
/\* Palabras clave \*/
-moz-float-edge: border-box;
-moz-float-edge: content-box;
-moz-float-edge: margin-box;
-moz-float-edge: padding-box;

/\* Valores globales \*/
-moz-float-edge: inherit;
-moz-float-edge: initial;
-moz-float-edge: unset;
```

Sintaxis
--------

### Valores

`border-box`

Las propiedades `height` y `width` incluyen el contenido, relleno y borde, pero no el margen.

`content-box`

Las propiedades `height` y `width` incluyen el contenido, pero no el relleno, borde o margen.

`margin-box`

Las propiedades `height` y `width` incluyen el contenido, relleno, borde y margen.

`padding-box`

Las propiedades `height` y `width` incluyen el contenido y relleno pero no el borde ni el margen.

Definición formal
-----------------

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

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

-moz-float-edge =
  border-box | content-box | margin-box | padding-box
```

Ejemplo
-------

### HTML


```html
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
```

### CSS


```css
.box {
  display: block;
  height: 5px;
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  box-sizing: border-box;
}
```

### Resultado

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

No es parte de ningún estándar.

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

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

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

* Error 432891 en Firefox
:hover
======

La pseudo-clase **`:hover`** de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).


```css
/\* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" \*/
a:hover {
  color: orange;
}
```


Los estilos definidos por la pseudoclase `:active` serán anulados por cualquier pseudo-clase posterior relacionada con el *enlace* (`:link`, `:visited`, o `:active`) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla `:hover` después de las reglas `:link` y `:visited`, pero antes de `:active`, según lo definido por el *orden LVHA*: `:link` — `:visited` — `:hover` — `:active`.

**Nota:** La pseudo-clase `:hover` es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase `:hover` podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades *hovering* limitadas o inexistentes.

Sintaxis
--------

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

### Ejemplo básico

#### HTML


```html
<a href="#">Intenta pasar el mouse sobre este enlace.</a>
```


#### CSS


```css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}
```


#### Resultado

### Galería de imágenes

Puede usar la pseudoclase `:hover` para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea esta demostración para una posible nota.

**Nota:** Para un efecto análogo, pero basado en la pseudo-clase `:checked` (aplicado a radioboxes ocultos), vea esta demostración, tomada de la página de referencia :checked.

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

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

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

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

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

* Chromium bug #370155: No ponga `:hover` sticky en los sitios que configuran una ventana gráfica móvil
* Chromium bug #306581: Inmediatamente muestra los estados hover y active al tocar cuando la página no se puede desplazar.
Libro de recetas de maquetación CSS
===================================

El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.

**Nota:** Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro módulo de aprendizaje de diseño CSS, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.

Las recetas
-----------

| Receta | Descripción | Metodos de maquetación |
| --- | --- | --- |
| Objetos media | Una caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet. | CSS Grid, alternativa `float`, dimensionamiento `fit-content` |
| Columnas | Cuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas. | CSS Grid, Multicol, Flexbox |
| Centrar un elemento | Cómo centrar un elemento horizontal y verticalmente. | Flexbox, Box Alignment (en-US) |
| Pies de página pegajosos | Creación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto. | CSS Grid, Flexbox |
| Navegación dividida | Un patrón de navegación en el que algunos enlaces se separan visualmente de los demás. | Flexbox, `margin` |
| Navegación con migas de pan | Crear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página. | Flexbox |
| Lista de grupos con insignias | Una lista de elementos con una insignia para mostrar un conteo. | Flexbox, Box Alignment (en-US) |
| Paginación | Enlaces a páginas de contenido (como los resultados de búsqueda). | Flexbox, Box Alignment (en-US) |
| Tarjeta (en-US) | Un componente de tarjeta, que se muestra en una rejilla de tarjetas. | Grid Layout |

Aporta con una receta
---------------------

Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. Revisa esta página para obtener una plantilla y pautas para escribir su propio ejemplo.
::-webkit-meter-optimum-value
=============================

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

Resumen
-------

El pseudo-elemento CSS `::-webkit-meter-optimum-value` da estilo al elemento meter cuando su valor está dentro del rango min-max establecido.

El color por defecto es verde.

Ejemplos
--------


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



```css
meter::-webkit-meter-bar {
  /\* Necesario para eliminar la propiedad de fondo por defecto \*/
  background: none;
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
}
```


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

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

No es parte de ninguna especificación. Es un pseudo-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 de WebKit/Blink para dar estilos a otras partes de `<meter>` (en-US):

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-suboptimum-value`
:focus-within
=============

La pseudo-clase CSS **`:focus-within`** representa un elemento que ha recibido el foco o que *contiene* un elemento que ha recibido el foco. En otras palabras, representa un elemento que en sí coincide con la pseudoclase `:focus` o tiene descendientes que coincidan con `:focus`. (Esto incluye descendientes en shadow DOM (en-US))


```css
/\* Selecciona un <div> cuando uno de sus descendientes recibe el foco\*/
div:focus-within {
  background: cyan;
}
```


Este selector es útil, por tomar un ejemplo común, para resaltar un contenedor `<form>` completo cuando el usuario enfoca sobre uno de sus elementos `<input>`.

Sintaxis
--------

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

En este ejemplo, el formulario recibirá estilos de color especiales cuando cualquiera de las entradas de texto reciba el foco.

### HTML


```html
<p>Intenta escribir en este formulario.</p>

<form>
  <label for="given\_name">Nombre:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Apellido:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS


```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

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

* `:focus`
* `:focus-visible` 
Experimental
* Grab your user's attention with the focus-within selector
:read-only
==========

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

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

* Learn more
* See full compatibility
* Report feedback
La pseudo-clase (en-US) **`:read-only`** de CSS representa un elemento que ya no es editable por el usuario (como un input).


```css
/\* Selecciona cualquier <input> que está en modo de solo lectura \*/
/\* Soportado en Firefox usando prefijo \*/
input:-moz-read-only {
  background-color: #ccc;
}

/\* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge \*/
p:read-only {
  cursor: not-allowed;
}
input:read-only {
  background-color: #ccc;
}
```


**Nota:** El selector no solo selecciona `<input>` marcados como `readonly`; también selecccionará cualquier elemento que no pueda ser editar por el usuario. Lea sobre el atributo contenteditable.

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

:read-only
```

Ejemplo
-------

### HTML


```html
<input type="text" value="Aquí puedes poner lo que quieras." />
<input type="text" value="Campo de solo lectura." readonly />
<p>Este es un párrafo normal.</p>
<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p>
```

### CSS


```css
input {
  min-width: 25em;
}
input:-moz-read-only {
  background: cyan;
}
input:read-only {
  background: cyan;
}

p:-moz-read-only {
  background: lightgray;
}
p:read-only {
  background: lightgray;
}
p[contenteditable="true"] {
  color: blue;
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

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

* `:read-write`
* Atributo HTML `contenteditable`
Columnas CSS
============

**Columnas CSS** es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

Referencia
----------

### Propiedades CSS

* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `column-count`
* `column-fill` (en-US)
* `column-gap`
* `column-rule` (en-US)
* `column-rule-color` (en-US)
* `column-rule-style` (en-US)
* `column-rule-width` (en-US)
* `column-span`
* `column-width` (en-US)
* `columns` (en-US)
Guías
-----

Diseños multicolumna con CSS

Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1  |
:nth-of-type
============

La pseudo-clase **`:nth-of-type()`** de CSS selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.


```css
/\* Selecciona cada cuarto elementos <p> entre
 cualquier grupo de hermanos \*/
p:nth-of-type(4n) {
  color: lime;
}
```

Sintaxis
--------

La pseudo-clase `nth-of-type` se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.

Ver `:nth-child` para una explicación más detallada de su sintaxis.

### Sintaxis formal

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

### Ejemplo básico

#### HTML


```html
<div>
  <div>Este elemento no se cuenta.</div>
  <p>1er párrafo.</p>
  <p>2do párrafo.</p>
  <div>Este elemento no se cuenta.</div>
  <p>3er párrafo.</p>
  <p>4to párrafo.</p>
</div>
```


#### CSS


```css
/\* Párrafos impares \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* Párrafos pares \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* Primer párrafo \*/
p:nth-of-type(1) {
  font-weight: bold;
}
```


#### Resultado

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

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

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

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

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

* `:nth-child`, `:nth-last-of-type`
::-moz-list-number
==================

**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-list-number` te permite personalizar la apariencia de los números de los elementos de lista (`<li>`) en listas que sean listas ordenadas (`<ol>`).

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

li::-moz-list-number { style properties }
```

Ejemplo
-------

### CSS


```css
li::-moz-list-number {
  font-style: italic;
  font-weight: bold;
}
```

### HTML


```html
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
```

### Resultado

![moz-list-number.png](/es/docs/Web/CSS/::-moz-list-number/moz-list-number.png)
:active
=======

La pseudo-clase (en-US) `:active` de CSS representa un elemento (como un botón) que el usuario está activando. Cuando se usa un mouse, la "activación" generalmente comienza cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La pseudo-clase `:active` se usa comúnmente en los elementos `<a>` y `<button>`, pero también se puede usar en otros elementos.


```css
/\* Selecciona cualquier <a> que esté siendo activado \*/
a:active {
  color: red;
}
```


Los estilos definidos por la pseudoclase `:active` serán anulados por cualquier pseudoclase posterior relacionada con el enlace (`:link`, `:hover` o `:visited`) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla `:active` después de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: `:link` — `:visited` — `:hover` — `:active`.

**Nota:** En los sistemas con los ratones de varios botones, CSS3 especifica que la pseudo-clase `:active` sólo debe aplicarse al botón primario; en ratones diestros, este suele ser el botón más a la izquierda.

Sintaxis
--------

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

### HTML


```html
<a href="#">Este enlace cambiará a color lima mientras hace clic en él.</a>
```

### CSS


```css
a:link {
  color: blue;
} /\* Enlaces no visitados \*/
a:visited {
  color: purple;
} /\* Enlaces visitados \*/
a:hover {
  background: yellow;
} /\* El usuario esta sobre el enlace \*/
a:active {
  color: lime;
} /\* Enlaces activos \*/
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-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 enlaces: `:link`, `:visited`, y `:hover`