:defined

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.

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 item

Ejemplos

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:

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

Ver también

Componentes web