recursal/MDN huggingface dataset:
:default
========

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

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

* Learn more
* See full compatibility
* Report feedback
La pseudo-clase **`:default`** de CSS representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.

Este selector se puede usar en los elementos `<button>`, <input type="checkbox">, <input type="radio"> (en-US) y `<option>`.


```css
/\* Selecciona cualquier <input> predeterminado \*/
input:default {
  background-color: lime;
}
```


Los elementos agrupados que permiten selecciones múltiples también pueden tener múltiples valores predeterminados, es decir, pueden tener múltiples elementos seleccionados inicialmente. En este caso, *todos* los valores predeterminados se representan utilizando la pseudo-clase `:default`. Por ejemplo, puede diseñar las casillas de verificación predeterminadas entre un grupo de casillas de verificación (checkboxes).

Sintaxis
--------

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

### HTML


```html
<input type="radio" name="season" id="spring" />
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked />
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall" />
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter" />
<label for="winter">Winter</label>
```

### CSS


```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### Resultado

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

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

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

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

**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-suppressed` selecciona elementos que representan a imágenes que no han sido cargadas por estar bloqueado el sitio del que provienen.

Este selector está pensado sobre todo para los desarrolladores de temas.
:first
======

La pseudo-clase `:first` de CSS, utilizada con la regla-at `@page`, representa la primera página de un documento impreso.

```css
/\* Selecciona la primera página al imprimir \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```


**Nota:** No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes, `orphans` (en-US), `widows` y saltos de página del documento. Además, solo puede usar unidades de longitud absoluta al definir los márgenes. Todas las otras propiedades serán ignoradas.

Sintaxis
--------

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

### HTML


```html
<p>Primera página.</p>
<p>Segunda página.</p>
<button>Imprimir!</button>
```

### CSS


```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript


```js
document.querySelector("button").onclick = function () {
  window.print();
};
```

### Resultado

Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.

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 página: `:left`, `:right`
border-top-color
================

La propiedad CSS **`border-top-color`** establece el color superior de un elemento `border`. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas `border-color` o `border-top` son mas convenientes y preferidas.


```css
/\*valores <color> \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

/\* Valores globales \*/
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Heredable | no |
| Valor calculado | computed color |
| Animation type | a color |

Sintaxis
--------

La propiedad `border-top-color` es especificada con un valor unico.

### Valores

`<color>`

El color superior del borde

### Sintaxis Formal
```

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

Ejemplos
--------

### Un div simple con un borde

#### HTML


```html
<div class="mybox">
  <p>
    Esta es una caja con un border alrededor. Tenga en cuenta que un border de
    la caja es <span class="redtext">Rojo</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### Resultado

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

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

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

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

Ver tambien
-----------

* Las propiedades abreviadas de CSS relacionadas con los bordes : `border`, `border-top`, y `border-color`.
* Las propiedades abrevadas de CSS relacionadas con el color para los bordes: `border-right-color` (en-US), `border-bottom-color`, y `border-left-color`.
* Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : `border-top-style` (en-US) y `border-top-width` (en-US).
vertical-align
==============

Resumen
-------

La propiedad `vertical-align` de CSS especifica el alineado vertical de un elemento en línea o una celda de una tabla.

|  |  |
| --- | --- |
| Valor inicial | `baseline` |
| Applies to | inline-level and table-cell elements. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Percentages | refer to the `line-height` of the element itself |
| Valor calculado | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |

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

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
```

### Valores (para elementos en línea)

La mayoría de los valores de alinean verticalmente el elemento de forma relativa al elemento padre:

`baseline`

Alinea la línea base del elemento con la línea base del padre. La línea base de algunos elementos reemplazados (en-US), como `<textarea>` no está especificado en la especificación HTML, que significa que su comportamiento puede cambiar en un navegador u otro.

`sub`

Alinea la línea base del elemento con la línea subscript del elemento padre.

`super`

Alinea la línea base del elemento con la línea superscript del elemento padre.

`text-top`

Aligns the top of the element with the top of the parent element's font.

`text-bottom`

Aligns the bottom of the element with the bottom of the parent element's font.

`middle`

Aligns the middle of the element with the middle of lowercase letters in the parent.

`<length>`

Aligns the baseline of the element at the given length above the baseline of its parent.

`<percentage>`

Like <length> values, with the percentage being a percent of the `line-height` property.

For elements that do not have a baseline, the bottom margin edge is used instead.

However, two values vertically align the element relative to the entire line rather than relative to its parent:

`top`

Align the top of the element and its descendants with the top of the entire line.

`bottom`

Align the bottom of the element and its descendants with the bottom of the entire line.

Negative values are allowed.

### Valores (para celdas de tablas)

`baseline` (and `sub`, `super`, `text-top`, `text-bottom`, `<length>`, and `<percentage>`)

Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

`top`

Align the top padding edge of the cell with the top of the row.

`middle`

Center the padding box of the cell within the row.

`bottom`

Align the bottom padding edge of the cell with the bottom of the row.

Negative values are allowed.

Ejemplos
--------


```css
img {
  vertical-align: bottom;
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

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

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

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

* `line-height`, `text-align`, `margin`
* Understanding `vertical-align`, or "How (Not) To Vertically Center Content"
-webkit-mask-position-y
=======================

**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-mask-position-y` fija la posición inicial vertical de una imagen de máscara.

|  |  |
| --- | --- |
| Valor inicial | `0%` |
| Applies to | all elements |
| Heredable | no |
| Percentages | refer to the size of the box itself |
| Valor calculado | for `length` the absolute value, otherwise a percentage |
| Animation type | discrete |

Síntaxis
--------


```css
/\* Palabras clave valores \*/
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;

/\* valores <porcentaje> \*/
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;

/\* valores <longitud> \*/
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;

/\* Valores Múltiples\*/
-webkit-mask-position-y:
  50px,
  25%,
  -3em;

/\* Valores globales \*/
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: unset;
```

Values
------

`<percentage>`

Un porcentaje que sirve para indicar, empezando por el lado superior, la posición de la imagen en relación a la dimensión vertical del área de la caja de relleno (padding). Un valor del 0% indica que el lado superior de la imagen de máscara se alinea con el lado superior de la caja. Un valor del 100% indica que que el lado inferior de la imagen se alinea con el lado inferior de la caja.

`<length>`

Una longitud indicando la posición del lado superior de la imagen en relación con el lado superior de la cajade relleno (padding).

**`top`**

Equivalente a `0%`.

**`bottom`**

Equivalente a `100%`.

**`center`**

Equivalente a `50%`.

### Síntaxis Formal

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


```css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}
```

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

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

`-webkit-mask-position`, `-webkit-mask-position-x`, `-webkit-mask-origin`, `-webkit-mask-attachment`
::first-line (:first-line)
==========================

El Pseudoelemento **`::first-line`** aplica estilos a la primera línea de un elemento de bloque. Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.


```css
/\* Selecciona la primera línea de un <p> \*/
p::first-line {
  color: red;
}
```


**Nota:** CSS3 introdujo la notación `::first-line` (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan `:first-line`, añadido en CSS2.

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

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento `::first-line`:

* Todas las propiedades de fuente: `font`, `font-kerning` (en-US), `font-style`, `font-variant`, `font-variant-numeric` (en-US), `font-variant-position` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-alternates`, `font-variant-ligatures` (en-US), `font-synthesis` (en-US), `font-feature-settings` (en-US), `font-language-override`, `font-weight`, `font-size`, `font-size-adjust`, `font-stretch` (en-US), and `font-family`
* Todas las propiedades de fondo: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment`, and `background-blend-mode`
* La propiedad `color`
* `word-spacing` (en-US), `letter-spacing` (en-US), `text-decoration`, `text-transform`, and `line-height`
* `text-shadow`, `text-decoration`, `text-decoration-color`, `text-decoration-line`, `text-decoration-style`, and `vertical-align`.
Sintaxis
--------

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

### HTML


```html
<p>
  Los estilos sólo se aplicarán en la primera línea de este párrafo.
  Posteriormente, todo el texto tendrá el estilo normal. ¿Ves?
</p>

<span
 >La primera línea de este elemento no recibe ningún estilo especial, porque no
  es un elemento de bloque.</span
>
```

### CSS


```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* ADVERTENCIA: NO USES ESTOS\*/
  /\* Muchas propiedades son inválidas en pseudoelementos ::first-line \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

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

* `::first-letter`
font-family
===========

Resumen
-------

La propiedad `font-family` define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.

|  |  |
| --- | --- |
| Valor inicial | depends on user agent |
| 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-family: <familia o nombre genérico> [, <familia o nombre genérico>]* | inherit
```

### Valores

<nombre de familia o genérico>

puede ser un `<nombre de familia>` o un `<nombre genérico>`

nombre de familia

El nombre de la familia de la fuente. Por ejemplo, 'Times' y 'Helvética' son nombres de familia. Los nombres de familia que contengan espacios, deben escribirse entre comillas (por ejemplo: "Times New Roman").

nombre genérico

Se han definido los siguientes nombres genéricos: `serif, sans-serif, cursive, fantasy, monospace`. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.

Ejemplos
--------

Ver El Ejemplo Vivo
```

body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }

.receipt { font-family: Courier, "Lucida Console", monospace }
```

Notas
-----

Un nombre genérico debería ser siempre el último de la lista en una propiedad `font-family`.

La propiedad `font-family` especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes **no se detiene** en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realiza*carácter a carácter*, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.

Cuando una fuente no está disponible en algún `estilo de fuente`, `variantes de fuente`, o `tamaño de fuente`, estas propiedades pueden influir en la elección de la fuente.

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

* CSS 1
* CSS 2.1
* CSS 3
Compatibilidades
----------------

TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)
Posicionamiento CSS
===================

**Posicionamiento CSS** es un módulo de CSS que define cómo posicionar elementos absoluta y relativamente en la página.

Referencia
----------

### Propiedades CSS

* `bottom`
* `clear`
* `display`
* `float`
* `left`
* `position`
* `right`
* `top`
* `visibility`
* `z-index`
Guías
-----

Entendiendo la propiedad CSS z-index

Presenta la noción de contexto de apilamiento y explica cómo funciona el ordenamiento en el eje-Z a través de varios ejemplos.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
Comentarios
===========

Resumen
-------

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

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

/* Comentario */
```

Examples
--------


```css
/\* Comentario de una sola línea \*/

/\*
Un comentario
que se extiende
en varias
líneas
\*/
```

Notas
-----

La sintaxis de comentarios `/* */` es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento `<style>`, se puede usar `<!-- -->` para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios `/* */` estos no pueden ser anidados. En otras palabras, la primera instancia de `*/` que siga a una instancia de `/*` cerrará el comentario.

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

* CSS 2.1 Syntax and basic data types #comments
Véase también
-------------

* Referencia CSS
* CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models (en-US), and margin collapsing, or the initial, computed, resolved, specified, used (en-US), and actual values. Definitions of value syntax, shorthand properties and replaced elements.
:required
=========

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


```css
/\* Selecciona cualquier <input> requerido \*/
input:required {
  border: 1px dashed red;
}
```


Esta pseudo-clase es útil para resaltar campos que deben tener datos válidos antes de que se pueda enviar un formulario.

**Nota:** La pseudoclase `:optional` selecciona campos de formulario *opcionales*.

Sintaxis
--------

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

Ver `:invalid` para un ejemplo.

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

Obligatoriamente los `<input>` deben tener el atributo `required` aplicado a ellos. Esto asegurará que las personas que navegan con la ayuda de tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar un envío exitoso.

Si el formulario también contiene entradas opcionales, las entradas requeridas deben indicarse visualmente utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

* MDN Comprender las WCAG, explicaciones de la Guía 3.3 (en-US)
* Comprender el Criterio de Conformidad 3.3.2 | W3C Comprender WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # selector-required |
| 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: `:optional`, `:invalid`, `:valid`
* Validación de datos de formulario (en-US)
:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La pseudo-clase **`:defined`** de CSS representa cualquier elemento que se haya definido. Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método `CustomElementRegistry.define()`).


```css
/\* Selecciona cualquier elemento definido \*/
:defined {
  font-style: italic;
}

/\* Selecciona cualquier instancia de un elemento personalizado específico \*/
simple-custom:defined {
  display: block;
}
```

Sintaxis
--------

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

Los siguientes fragmentos están tomados de nuestra demostración Pseudo-clase-definida (ver también en directo).

En esta demostración, definimos un elemento personalizado trivial muy simple:


```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```


Luego inserta una copia de este elemento en el documento, junto con un `<p>` estándar:


```html
<simple-custom
 text="Texto de ejemplo del elemento personalizado"></simple-custom>

<p>Texto de ejemplo de párrafo estándar</p>
```


En el CSS primero incluimos las siguientes reglas:


```css
/\* Dar a los dos elementos fondos distintivos \*/
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/\* Tanto el elemento personalizado como el incorporado tienen texto en cursiva \*/
:defined {
  font-style: italic;
}
```


A continuación, proporcione las dos reglas siguientes para ocultar las instancias de nuestro elemento personalizado que no están definidas y las instancias que se definen como elementos de nivel de bloque:


```css
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}
```


Esto es útil si tiene un elemento personalizado complejo que demora un tiempo en cargarse en la página — es posible que desee ocultar las instancias del elemento hasta que la definición esté completa, para que no terminen con feos destellos de elementos sin estilo en la página

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

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

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

* Componentes web