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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:definedChrome 完全対応 54Edge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 完全対応 41Safari 完全対応 10WebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 完全対応 63Opera Android 完全対応 41Safari iOS 完全対応 10Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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

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