My custom block looked perfect in isolation and wrong on the live page, colours ignored, spacing overridden, as if my CSS were being vetoed. It was, and the veto system has a name, CSS specificity, the rules by which browsers decide which of several competing styles wins. On an Elementor site, where the builder, the theme, and my code all style the same elements, specificity is the actual battlefield, and this post is the fight as I fought it on the visa site.
The mechanics in one breath, when multiple rules target one element, the browser scores each selector, ids beat classes, more classes beat fewer, and inline styles beat nearly everything, ties go to whoever loads last. Elementor generates selectors like this for its own styling:
/* Elementor's generated rule, two classes deep */
.elementor-1234 .elementor-element.elementor-element-abcd .cuv-h { color: #54595f; }
/* my rule, one class, loses regardless of load order */
.cuv-h { color: #0b3d2e; }
My single class scores below the builder’s stacked classes, so my colour loses even though my file loads later. The tempting fix is !important, which overrides scoring by force, and the honest advice is to treat it as a last resort, because every !important you write is a wall your own future CSS will have to !important its way past, an arms race with yourself. The sustainable fix is winning the score legitimately, mirror enough of the winning rule’s weight by anchoring to your own wrapper chain:
/* two of my own classes: matches the weight, wins on load order */
.cuv-compare .cuv-col .cuv-h { color: #0b3d2e; }
/* or hook the page itself for one more class of weight */
body.page-id-87 .cuv-compare .cuv-h { color: #0b3d2e; }
Stacking my own wrapper classes raised my score without touching anyone else’s markup, and the body class trick, WordPress prints page-id classes on every page, adds targeted weight when a specific page needs it. The debugging tool that ends guesswork is the browser inspector’s Styles panel, click the element, and every competing rule is listed with the losers struck through, which turns a mystery into arithmetic, read who is winning, count why, and write a selector that counts higher.
A few things people ask me about this
Why does my CSS work in preview but not on the live page? Different style stacks load in each context and a heavier selector is beating yours live. Inspect the element on the live page, the winning rule and its weight are right there.
Is !important ever the right answer? Occasionally, against inline styles or third-party CSS you cannot outrank sanely. Use it scoped to your namespaced classes and comment why, so the exception stays an exception.
Next
With the styling wars won, the pages had to do their real job, walking an anxious visitor to a submitted application. Designing that path to action is the next post.