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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo SiEdge ? Firefox Soporte completo 63IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android Soporte completo 63Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

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