You are on the editable version of MDN Web Docs

View as an MDN Web Docs user:

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;




The following snippets are taken from our defined-pseudo-class demo (see it live also).

In this demo we define a very simple trivial custom element:


  class extends HTMLElement {
    constructor() {

      let divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})

Then insert a copy of this element into the document, along with a standard <p>:


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

<p>Standard paragraph example text</p>


In the CSS we first include the following rules:


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

simple-custom {
  background: cyan;

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

Then 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) {
  display: none;

simple-custom:defined {
  display: block;

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




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

Browser compatibility

Supported in Chrome, Opera, Safari. Not in Firefox yet.

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:definedChrome Full support 54Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 41Safari Full support 10WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 63Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 6.0


Full support  
Full support
No support  
No support

See also


Document Tags and Contributors

Last updated by: liuhao088,