What the CSS Cascade is #
CSS stands for Cascading Style Sheets. The cascade is the system browsers use to resolve conflicts when multiple CSS rules apply to the same element. When your theme sets a button to blue, your Page Builder sets it to green, and a plugin adds an Inline Style setting it to red, the browser has to pick 1. The cascade is the algorithm it uses to decide which rule wins.
Understanding the cascade is what separates a developer who can fix a visual problem in 5 minutes from a site owner who spends 3 hours changing settings that don’t take effect. The cascade is not complicated once you know its rules. But it’s completely invisible unless you have a tool that reads it for you.
The 3 factors that determine which CSS rule wins #
1. Origin: where the rule came from #
CSS rules come from different sources, and the browser assigns weight to each source. From highest to lowest weight: inline styles (styles added directly to an element’s HTML tag), then author stylesheets (your theme, Page Builder, and plugins), then browser defaults (the base styles every browser applies to every element).
This is why a style you set in Elementor sometimes doesn’t apply: if a plugin is adding an Inline Style to that same element, the Inline Style wins regardless of how specific your Elementor rule is. Lens classifies the origin of every rule in its capture.
2. Specificity: how precisely the rule targets the element #
Among rules from the same origin, the more specifically a rule targets an element, the higher its priority. A rule targeting a specific ID (#checkout-button) beats a rule targeting a class (.button). A rule targeting a class beats a rule targeting an element type (button).
This is the most common source of CSS problems on WordPress sites. Your Page Builder uses class selectors. Your theme uses ID selectors or more specific class combinations. The theme wins, even though you set the style in your Page Builder. You didn’t do anything wrong. The theme’s rule is just more specific.
3. Source order: which rule was declared last #
When 2 rules have the same origin and the same specificity, the one that appears later in the code wins. This is why the order in which stylesheets load matters. If your theme’s stylesheet loads after your Page Builder’s stylesheet, and both rules have the same specificity, the theme’s rule wins.
What Lens actually captures from the cascade #
When you click an element with Lens active, it captures the full cascade picture for that element:
- The winning rules: every CSS property currently applied to the element and the exact rule that set it.
- The losing rules: every rule that was considered for each property but was overridden, and why it lost (lower specificity, earlier source order, or lower-priority origin).
- The origin of every rule: whether each rule came from the browser’s defaults, your theme, your Page Builder, a specific plugin, an Inline Style, or a JavaScript injection.
- The ancestor chain: the same cascade picture for every parent element above the one you clicked, because constraints on parent elements frequently determine why child elements behave unexpectedly.
- Competing elements: other elements in the same space that may be overlapping or constraining through Flexbox or grid parent rules.
Why this is more than DevTools shows you #
DevTools shows you the cascade for a single element. It shows the winning rules prominently and the losing rules crossed out. What it doesn’t do is explain the cascade in terms you can act on if you don’t already read CSS. It shows you that 1 rule has a strikethrough, but it doesn’t tell you: “The strikethrough rule came from your Page Builder. The rule beating it came from your theme. The theme rule wins because it uses an ID selector and your Page Builder uses a class selector. Here’s the override you need.”
That explanation is what Lens produces. The same cascade data DevTools shows, translated into a diagnosis and a specific next step.