Inline style overrides ID-based CSS rules

Question

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v135.0.7049.96 Reproducible demo link https://jsfiddle.net/bqkLwt8j/ Describe the bug When an element has an inline style and also matches an ID-based CSS rule, the styles from the ID selector are removed - even if the inline style doesn’t override those properties. However, this issue does not occur with class-based CSS rules, which behave as expected. How to reproduce the bug? Add a CSS rul...

artf · Accepted Answer

Thanks for the report @jsxOverdose Will be fixed in the next release

GJS Helper · Answer

You've accurately identified a specific behavior in GrapesJS where inline styles appear to completely override ID-based CSS rules, even for non-conflicting properties. This is indeed a deviation from standard CSS specificity rules and can be considered a bug in how GrapesJS's internal style management handles the interaction between inline styles and ID selectors. Root Cause Analysis In standard CSS, specificity dictates that an inline style (style="...") has the highest specificity, followed b...

Inline style overrides ID-based CSS rules

Question

Answers (2)

Related Questions and Answers

MousePosFetcher in resizer config & change:style listener not working

Style Manager Fails to Interpret Descendant Selectors Correctly

ColorPicker Offset incorrect when Panels are outside of Editor Container

Section should be overlapping issue present in grapes js

Paid Plugins That Match This Issue

Browse Plugin Categories