For me the “starts with”-trick that @Paul_Danyliuk introduced works.
At least for me it works with or without the double quotes.
After a while trying to understand why your code I copy-pasted was not working I noticed few small problems and I managed to make it work.
The form plugin used here changes text not marked as code or preformatted text: double quote pairs to quotation marks and two adjacent dashes to a different kind of dash which explains why I had problems making your code work.
I’m guessing the reason the code was not working for you is one missing double quote after formula_editor--root. The working code should be:
div[class^="formula_builder--root"],
div[class^="formula_editor--root"],
div[class^="canvas_formula--popover"]
{ background-color: pink; width: 1800px; }
As I mentioned I also use " User JavaScript and CSS" https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
I originally found @GJ_Roelofs 's awesome post about creating a Table of contents via JS using that extension. I added the rules on top of that.
For me my CSS additions work if with different settings. It only needs to be Enabled, eg. Highest Priority CSS is not needed.
As domain I use: https://coda.io/d
By the way, an easy way to test CSS rules is to inject CSS via Dev tools console like this (I find this easier to copy-paste than using the styles panel or using an extension):
(function(){
let style = `<style>
div[class^="formula_builder--root"],
div[class^="formula_editor--root"],
div[class^="canvas_formula--popover"]
{ background-color: pink; width: 1800px; }
</style>`;
document.head.insertAdjacentHTML("beforeend", style);
})();