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()).

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

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

Sintaxis

:defined

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:

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

// 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:

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

Especificación Estado Comentario
HTML Living Standard
La definición de ':defined' en esta especificación.
Living Standard  

Compatibilidad con navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico Si ? No No Si Si
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico Si Si ? No Si Si Si

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: lajaso
 Última actualización por: lajaso,