coderef

:host-context()Limited availability

The :host-context() CSS pseudo-class selects the containing element of the shadow tree in which it is used if that element or an ancestor matches the provided selector.

Not yet supported in all major browsers — check the table and provide a fallback.

Discouraged: The CSS Working Group removed :host-context() from the specification, due to opposition from vendors, performance considerations, and interest in alternatives. Use instead: Container style queries

How to use ↓Compare browsers

Browser support

DesktopChrome
1–53Not supported
54+Supportedsince Oct 12, 2016
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
✕Not supportedup to 27
Current: 27
MobileChrome Android
18–53Not supported
54+Supportedsince Oct 19, 2016
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
✕Not supportedup to 27
Current: 27

How to use

Not supported in Firefox, Safari, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: :host-context.

Feature detection

CSS · check before using
@supports selector(:host-context(*)) {
  /* styles that use :host-context(*) */
}

/* or in JavaScript */
if (CSS.supports("selector(:host-context(*))")) {
  // use it
}

Documentation (MDN)

Specification