CSS:defined 疑似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、(CustomElementRegistry.define() メソッドを使用して)定義に成功したカスタム要素が含まれます。

/* 定義されたすべての要素を選択 */
:defined {
  font-style: italic;
}

/* specific custom 要素のすべてのインスタンスを選択 */
simple-custom:defined {
  display: block;
}

構文

:defined

以下のスニペットは defined-pseudo-class のデモから取ったものです(ライブで見るにはこちら)。

このデモでは、とても簡単で小さなカスタム要素を定義しています。

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(divElem);
  }
})

それからこの要素のコピーを、標準の <p> と一緒に文書に挿入します。

<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>

CSS にはまず以下のルールを入れます。

// 2つの要素を背景で区別できるようにする
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

// カスタム要素と組み込み要素を両方イタリック体にする
:defined {
  font-style: italic;
}

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
:defined の定義
現行の標準  

ブラウザー実装状況

このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 有り ? 無し 無し 有り 有り
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 有り 有り ? 無し 有り 有り ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: mfuji09,