CSS :defined pseudo-class

Definition and usage

CSS :defined The pseudo-class is used to match any defined element.

This pseudo-class can be used for standard elements and custom elements that have been successfully defined.

Example

Usage :defined Pseudo-class:

custom-element:not(:defined) {
  border-color: grey;
  color: grey;
}
custom-element:defined {
  background-color: salmon;
  border-color: maroon;
  color: black;
}
/* Display loading message */
custom-element:not(:defined)::before {
  content: "Loading...";
  position: absolute;
  inset: 0 0 0 0;
  align-content: center;
  text-align: center;
  font-size: 25px;
  background-color: white;
}
/* Remove loading message */
custom-element:defined::before {
  content: "";
}

Try it yourself

CSS syntax

:defined {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version that fully supports this pseudo-class.