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

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

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

構文

:defined

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

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);
  }
})

次に、 <simple-custom> 要素と標準の <p> 要素のインスタンスがある HTML です。

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

<p>Standard paragraph example text</p>

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

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

simple-custom {
  display: block;
  background: cyan;
}

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

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

simple-custom:not(:defined) {
  opacity: 0;
}

simple-custom:defined {
  opacity: 0.75;
  text-decoration: underline;
}

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

結果

以上のコードを実行した結果は次の通りです。

仕様書

仕様書 状態 備考
HTML Living Standard
:defined の定義
現行の標準  

ブラウザーの対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge ? Firefox 完全対応 63IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 63Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

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

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