1. ウェブ
  2. CSS
  3. リファレンス
  4. セレクター
  5. :has-slotted

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS :has-slotted 擬似クラス

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more browser support for this feature? Tell us why.

:has-slotted は CSS の擬似クラスで、 <slot> 要素のコンテンツが空ではないか、または既定値を使用していない場合に一致します（詳細については、テンプレートとスロットの使用を参照してください）。

メモ: 単一の空白テキストノードでも :has-slotted が適用されます。

これは、シャドウ DOM 内に配置された CSS 使用した場合にのみ動作します。

css
/* 既定ではないコンテンツを持つ <slot> 要素のコンテンツを選択 */
:has-slotted {
  color: green;
}

/* コンテンツまたは既定のコンテンツを持たない <slot> 要素のコンテンツを選択 */
:not(:has-slotted) {
  color: red;
}

構文

css
:has-slotted {
  /* ... */
}

例

この例には 2 つの <slot> 要素があり、一方はコンテンツが割り当てられていますが、もう一方は割り当てられていません。

HTML

html
<p>
  <template shadowrootmode="open">
    <style>
      :has-slotted {
        color: rebeccapurple;
      }
    </style>
    <slot name="one">プレイスホルダー 1</slot>
    <slot name="two">プレイスホルダー 2</slot>
  </template>
  <span slot="one">スロットされたコンテンツ</span>
</p>

結果

コンテンツが割り当てられた <slot> 要素は、擬似クラス :has-slotted と一致し、color 値 rebeccapurple が適用されています。

仕様書

仕様書
CSS Shadow Module Level 1
# the-has-slotted-pseudo

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告