Web/CSS/ defined

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

Hiding elements until they are defined

The following snippets are taken from our defined-pseudo-class demo ([[../../../../../../mdn.github.io/web-components-examples/defined-pseudo-class/index|see it live also]]).

In this demo we define a very simple trivial 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);
  }
})

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

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:defined`	Chrome Full support 54	Edge Full support 79	Firefox Full support 63	IE No support No	Opera Full support 41	Safari Full support 10	WebView Android Full support 54	Chrome Android Full support 54	Firefox Android Full support 63	Opera Android Full support 41	Safari iOS Full support 10	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support