diff --git a/front_end/core/sdk/CSSMatchedStyles.ts b/front_end/core/sdk/CSSMatchedStyles.ts
index f1e7abbbb8..ea23c29e4d 100644
--- a/front_end/core/sdk/CSSMatchedStyles.ts
+++ b/front_end/core/sdk/CSSMatchedStyles.ts
@@ -249,7 +249,7 @@ export class CSSMatchedStyles {
 
   hasMatchingSelectors(rule: CSSStyleRule): boolean {
     const matchingSelectors = this.getMatchingSelectors(rule);
-    return matchingSelectors.length > 0 && this.mediaMatches(rule.style);
+    return matchingSelectors.length > 0 && this.queryMatches(rule.style);
   }
 
   getMatchingSelectors(rule: CSSStyleRule): number[] {
@@ -327,13 +327,14 @@ export class CSSMatchedStyles {
     map.set(selectorText, value);
   }
 
-  mediaMatches(style: CSSStyleDeclaration): boolean {
+  queryMatches(style: CSSStyleDeclaration): boolean {
     if (!style.parentRule) {
       return true;
     }
-    const media = (style.parentRule as CSSStyleRule).media;
-    for (let i = 0; media && i < media.length; ++i) {
-      if (!media[i].active()) {
+    const parentRule = style.parentRule as CSSStyleRule;
+    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports];
+    for (const query of queries) {
+      if (!query.active()) {
         return false;
       }
     }
diff --git a/front_end/core/sdk/CSSSupports.ts b/front_end/core/sdk/CSSSupports.ts
index a31c0ba7f5..61b2e70d5a 100644
--- a/front_end/core/sdk/CSSSupports.ts
+++ b/front_end/core/sdk/CSSSupports.ts
@@ -13,6 +13,8 @@ export class CSSSupports extends CSSQuery {
     return payload.map(supports => new CSSSupports(cssModel, supports));
   }
 
+  #active: boolean = true;
+
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
     super(cssModel);
     this.reinitialize(payload);
@@ -22,9 +24,10 @@ export class CSSSupports extends CSSQuery {
     this.text = payload.text;
     this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
     this.styleSheetId = payload.styleSheetId;
+    this.#active = payload.active;
   }
 
   active(): boolean {
-    return true;
+    return this.#active;
   }
 }
diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts
index 3d5a4c64c0..70993a4302 100644
--- a/front_end/panels/elements/StylesSidebarPane.ts
+++ b/front_end/panels/elements/StylesSidebarPane.ts
@@ -2364,7 +2364,7 @@ export class StylePropertiesSection {
       return;
     }
 
-    this.queryListElement.classList.toggle('query-matches', this.matchedStyles.mediaMatches(this.styleInternal));
+    this.queryListElement.classList.toggle('query-matches', this.matchedStyles.queryMatches(this.styleInternal));
 
     const selectorTexts = rule.selectors.map(selector => selector.text);
     const matchingSelectorIndexes = this.matchedStyles.getMatchingSelectors(rule);