CSS :defined Pseudo-class
Example
Use of the :defined pseudo-class:
custom-element:not(:defined) {
border-color: grey;
color: grey;
}
custom-element:defined {
background-color: salmon;
border-color: maroon;
color: black;
}
/* show 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 the loading message */
custom-element:defined::before {
content: "";
}
Try it Yourself »
border-color: grey;
color: grey;
}
custom-element:defined {
background-color: salmon;
border-color: maroon;
color: black;
}
/* show 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 the loading message */
custom-element:defined::before {
content: "";
}
Definition and Usage
The CSS :defined pseudo-class matches any
element that has been defined.
This pseudo-class can be used on standard elements and custom elements that have been successfully defined.
| Version: | CSS4 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-class.
| Pseudo-class | |||||
|---|---|---|---|---|---|
| :defined | 54 | 79 | 63 | 10 | 41 |
CSS Syntax
:defined {
css declarations;
}
css declarations;
}