CSS :defined 伪类

定義と使用方法

CSS :defined パーシベーションは、どの定義された要素にも一致します。

このパーシベーションは、標準の要素と成功して定義されたカスタム要素に使用できます。

例

使用 :defined パーシベーション：

custom-element:not(:defined) {
  border-color: grey;
  color: grey;
}
custom-element:defined {
  background-color: salmon;
  border-color: maroon;
  color: black;
}
/* ロードメッセージを表示 */
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;
}
/* ロードメッセージを削除 */
custom-element:defined::before {
  content: "";
}

自分で試してみてください

CSS文法

:defined {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、そのパーシベーションの最初のブラウザバージョンを完全にサポートする指定しています。