BaselineLab
0Apoyar

Estados abiertos

Distingue un atributo HTML, el estado semántico abierto y la visibilidad específica de un popover mediante interacciones reales.

Leer la guía

Preguntar a la IA

Estados abiertos

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
Selector actual:open
Soporte sin confirmarEspecificidad—

Preparando el escenario y sus resultados…

Coincide con elementos que admiten apertura y están abiertos, incluidos details, dialog, select e inputs que soportan picker mientras muestran su interfaz nativa.

Preview del selector

Detalles abiertos

El atributo open está presente y el contenido se muestra.

Detalles cerrados

Al abrirlo, el navegador añade el atributo y activa :open.

HTML
<section class="open-state-demo details-demo" aria-label="Comparación de elementos details abiertos y cerrados">
  <details open>
    <summary>Detalles abiertos</summary>
    <p>El atributo open está presente y el contenido se muestra.</p>
  </details>
  <details>
    <summary>Detalles cerrados</summary>
    <p>Al abrirlo, el navegador añade el atributo y activa :open.</p>
  </details>
</section>
CSS
:open {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}
JS
// La interacción usa comportamiento HTML nativo y no necesita JavaScript.

Guía educativa de selectores de estados abiertos

Tres sintaxis, tres preguntas distintas

Relaciona atributos persistentes y estados transitorios con el elemento nativo que realmente los define.

Volver al playground

Modelo mental

Elige el selector según la fuente del estado que necesitas observar.

[open]

Inspecciona el HTML

Pregunta si el atributo open está presente, aunque no generaliza a todo elemento que abre una interfaz.

:open

Inspecciona un estado semántico

Pregunta si un elemento que puede abrirse o cerrarse está actualmente abierto.

:popover-open

Inspecciona la visibilidad popover

Pregunta si un elemento con popover se encuentra ahora en estado mostrado.

Atributo open

Observa el estado reflejado en HTML para details y dialog.

[open]

Elementos cuyo HTML incluye el atributo open.

Especificidad(0, 1, 0)
Comportamiento
  • En details y dialog, la propiedad open refleja este atributo booleano.
  • Puede permanecer presente hasta que el elemento se cierre mediante interacción o API.
Ejemplos
SelectorEspecificidad(0, 1, 0)
[open]
HTML
Coincide: <details open>Visible content</details>
<details>Hidden content</details>
SelectorEspecificidad(0, 1, 1)
dialog[open]
HTML
Coincide: <dialog open>Non-modal dialog</dialog>
<div popover>Popover</div>
Errores frecuentes
  • No selecciona un select con su picker abierto.
  • No debe sustituirse por [popover], que declara otra capacidad.
Soporte y compatibilidad

Los selectores de atributo están ampliamente disponibles.

Consultar la definición completaAbre en una pestaña nueva

Estado :open

Agrupa details, dialog, select e inputs con picker bajo una pseudoclase semántica.

:open

Elementos con estado abierto/cerrado que están actualmente abiertos.

Especificidad(0, 1, 0)
Comportamiento
  • Se aplica a details, dialog, select e inputs que soportan picker mientras su interfaz está abierta.
  • Describe estado, aunque en details y dialog coincida normalmente con la presencia de open.
Ejemplos
SelectorEspecificidad(0, 1, 0)
:open
HTML
Coincide: <details open>Visible content</details>
<details>Hidden content</details>
SelectorEspecificidad(0, 1, 1)
select:open
HTML
Coincide: <select>
  <option>One</option>
  <option>Two</option>
</select>
SelectorEspecificidad(0, 2, 1)
input[type="color"]:open
HTML
Coincide: <input type="color" value="#f97316">
Errores frecuentes
  • No se aplica a un popover solo por estar mostrado.
  • Los estados de select e input son transitorios y dependen de abrir su UI nativa.
Soporte y compatibilidad

:open es Baseline Newly Available desde mayo de 2026; conserva detección de soporte.

Consultar la definición completaAbre en una pestaña nueva

Popover mostrado

Distingue declarar un popover de tenerlo visible en la top layer.

:popover-open

Elementos popover que están actualmente mostrándose.

Especificidad(0, 1, 0)
Comportamiento
  • El botón con popovertarget activa el estado sin JavaScript.
  • Al ocultarse, el elemento conserva popover pero deja de coincidir.
Ejemplos
SelectorEspecificidad(0, 2, 0)
[popover]:popover-open
HTML
<button popovertarget="help">Help</button>
Coincide: <div id="help" popover>Popover content</div>
Errores frecuentes
  • [popover] selecciona también popovers ocultos.
  • No es una variante de :open ni depende del atributo open.
Soporte y compatibilidad

El estado forma parte de la Popover API, Baseline Newly Available.

Consultar la definición completaAbre en una pestaña nueva