Increase specificity of editor styles

v6
1

I have a situation where I’m embedding a CodeMirror instance within another application written by someone else. They have a CSS style that overrides everything within it, like:

.fl-lightbox * {
  color: #333;
  ...
}

This interferes with the editor styles, making text invisible in dark theme, etc.

I’m wondering if there’s a way to increase the specificity of editor classes/styles to somehow overpower this, either using !important or wrap in body .cm-editor {}. I’ve searched through some forum posts but couldn’t find a solution.

2

I’m not sure it’d be possible to increase precedence of the editor’s styles as a whole. And even if you could, that might not help here, since such broad style rules will also mess with properties the editor doesn’t set at all. The only solution I can think of is a kind of counter-reset style like .cm-editor * { color: unset }, applied with lower precedence than the editor’s other styles.

3

Thank you for the reply. I’ll try resetting the parent styles that way, but my previous similar attempts were not successful due to the lower specificity of the editor’s generated classes. I was hoping there might be an option to wrap or prefix the generated editor styles to make them more powerful than the parent’s styles.

I think this is just an inherent difficulty with the cascading nature of CSS, and the real solution is to ask the developers of the parent application to ease up on their eagerly applied styles.

Maybe an iframe or shadow DOM could be a workaround. I’ll post here if/when I find a solution.