:defined
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die :defined
CSS Pseudoklasse repräsentiert jedes Element, das definiert wurde. Dies schließt sowohl Standard-Elemente ein, die im Browser integriert sind, als auch benutzerdefinierte Elemente, die erfolgreich definiert wurden (d.h. mit der Methode CustomElementRegistry.define()
).
/* Selects any defined element */
:defined {
font-style: italic;
}
/* Selects any instance of a specific custom element */
custom-element:defined {
display: block;
}
Syntax
:defined {
/* ... */
}
Beispiele
Elemente ausblenden, bis sie definiert sind
In diesem Beispiel definieren wir ein einfaches benutzerdefiniertes Element mit dem Namen <custom-element>
und verwenden die Selektoren :not(:defined)
und :defined
, um das Element vor und nach seiner Definition zu stylen. Dies ist nützlich, wenn Sie ein komplexes benutzerdefiniertes Element haben, das eine Weile braucht, um in die Seite geladen zu werden — Sie möchten möglicherweise Instanzen des Elements ausblenden, bis die Definition abgeschlossen ist, um zu vermeiden, dass hässliche ungestylte Elemente auf der Seite blitzen.
HTML
Der folgende HTML-Code verwendet das benutzerdefinierte Element, aber das Element wurde noch nicht definiert. Wir fügen auch einen <button>
ein, der das benutzerdefinierte Element definiert, wenn er geklickt wird, sodass Sie seinen Zustand vor und nach der Definition sehen können.
<custom-element>
<p>
Loaded content: Lorem ipsum tel sed tellus eiusmod tellus. Aenean. Semper
dolor sit nisi. Elit porttitor nisi sit vivamus.
</p>
</custom-element>
<button id="btn">define the <code><custom-element></code></button>
CSS
Im folgenden CSS verwenden wir den Selektor custom-element:not(:defined)
, um das Element auszuwählen und grau zu färben, während es nicht definiert ist, und den Selektor custom-element:defined
, um das Element auszuwählen und es schwarz zu färben, nachdem es definiert wurde.
custom-element:not(:defined) {
border-color: grey;
color: grey;
}
custom-element:defined {
background-color: wheat;
border-color: black;
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: 2rem;
background-color: white;
border-radius: 1rem;
}
/* remove the loading message */
custom-element:defined::before {
content: "";
}
Wir haben auch das ::before
Pseudoelement verwendet, um eine "Loading..."-Overlay-Nachricht anzuzeigen, bis das Element definiert ist. Nach der Definition wird es durch Setzen des content
auf einen leeren String entfernt.
Das folgende JavaScript wurde verwendet, um das benutzerdefinierte Element zu definieren. Damit Sie den Zustand des benutzerdefinierten Elements vor und nach der Definition sehen können, führen wir die Methode define()
aus, wenn der Button geklickt wird.
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
customElements.define("custom-element", class extends HTMLElement {});
btn.remove();
});
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # selector-defined |
Browser-Kompatibilität
BCD tables only load in the browser