Limited supportLimited browser support. Check compatibility before use.
Selectors Limited support

:has-slotted

The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.

Selectors

Overview

The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:has-slotted
136
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
slot:has-slotted {
  border: 1px solid blue;
  padding: 8px;
}
slot:not(:has-slotted) {
  color: gray;
}

Live demo

slot with

CSS slot with demo.

PreviewFullscreen

slotempty

CSS slotempty demo.

PreviewFullscreen

condition withstyle

CSS condition withstyle demo.

PreviewFullscreen

Use cases

  • Using :has-slotted

    The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features