Style Manager Fails to Interpret Descendant Selectors Correctly

Quick answerby artf

Yeah, that's not supported as there might be some performance implications trying to match any possible rule there. What you can do though is select any rule via styleManager.select

Read full answer below ↓

Question

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.205 Reproducible demo link https://codesandbox.io/p/sandbox/naughty-microservice-5hp3h4 Describe the bug How to reproduce the bug:Add the dark-style class to the body: js editor.CssComposer.addRules(".dark-style .test-block { margin-top: 50px; }"); What is the expected behavior: Interpret in style manager as margin-top: 50px; What is the current behavior: Does not show up in style manager, but renders correctly in canvas Html example: ```html <div id="gjs"> <div class="te...

Answers (4)

artf• Jan 10, 2025

Yeah, that's not supported as there might be some performance implications trying to match any possible rule there. What you can do though is select any rule via styleManager.select

MLMarxx• Jan 10, 2025

Ok, thanks for clarification - currently using select, any ideas how to target media tags that way?

artf• Jan 11, 2025

You can get the CSSRule you need (getRule) and then pass it to styleManager.select

GJS Helper• May 17, 2026

The issue you've encountered stems from how the GrapesJS Style Manager interprets and displays CSS rules, particularly those involving complex selectors like descendant selectors. While the browser correctly applies the styles defined by .dark-style .test-block on the canvas, the Style Manager's UI...

View full discussion on GitHub →