:defined CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS :defined pseudo class matches any element that has been defined. This includes both standard elements built into the browser, such as <div> and <p>, and custom elements that have been successfully defined using the CustomElementRegistry.define() method.

The :defined pseudo class can be used to style elements in a variety of ways. For example, it can be used to:

Style all custom elements on a page

Style all elements of a particular type, regardless of whether they are standard or custom elements

Style elements based on their tag name, without having to specify the tag name explicitly

Here are some examples of how to use the :defined pseudo class:

/* Style all custom elements on a page */

:defined {

  color: blue;

}



/* Style all elements of type <my-custom-element> */

my-custom-element {

  font-size: 20px;

}



/* Style all elements with the tag name "button" */

button {

  background-color: red;

}

The :defined pseudo class is a powerful tool that can be used to style elements in a more flexible and reusable way. It is especially useful for working with custom elements.

Syntax

:defined {
  /* ... */
}

Example

HTML

Example of :defined pseudo class.



<p>Example of text in &lt;p&gt; tags</p>

CSS

/* Selects any defined element */

:defined {

  font-style: italic;

}



/* Selects any instance of a specific custom element */

p:defined {

  color: red;

}

Result

Editor