Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em English (US).

The :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method).

/* Selects any defined element */
:defined {
  font-style: italic;
}

/* Selects any instance of a specific custom element */
simple-custom:defined {
  display: block;
}

Syntax

:defined

Examples

This example first includes a script defining a <simple-custom> custom element:

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);
  }
})

Next, we have some HTML with an instance of the <simple-custom> element, and a standard <p> element:

<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>

Now for some CSS. Here we define background colors based on element types, change the opacity of the custom element based on whether or not it is defined, and use the :defined selector to make all defined element text appear in italic.

/* Give the two elements distinctive backgrounds */
p {
  background: yellow;
}

simple-custom {
  display: block;
  background: cyan;
}

/* Both the custom and the built-in element are given italic text */
:defined {
  font-style: italic;
}

Finally, we provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements:

simple-custom:not(:defined) {
  opacity: 0;
}

simple-custom:defined {
  opacity: 0.75;
  text-decoration: underline;
}

This is useful if you have a complex custom element that takes a while to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page.

Result

Here is the result of running the code above:

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':defined' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox Full support 63IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 63Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: mfuji09, chrisdavidmills, estelle, jpmedley, xfq, fscholz
Última atualização por: mfuji09,