:defined CSS Pseudo Class


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.


:defined {
  /* ... */


Example of :defined pseudo class.

<p>Example of text in &lt;p&gt; tags</p>
/* Selects any defined element */
:defined {
font-style: italic;

/* Selects any instance of a specific custom element */
p:defined {
color: red;

Browser Support

The following table will show you the current browser support for the CSS :defined pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023