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 para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:definedChrome Soporte completo 54Edge Sin soporte NoFirefox Soporte completo 63IE Sin soporte NoOpera Soporte completo 41Safari Soporte completo 10WebView Android Soporte completo 54Chrome Android Soporte completo 54Firefox Android Soporte completo 63Opera Android Soporte completo 41Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

Ver también

Etiquetas y colaboradores del documento

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