Can I Add Custom CSS to a Single Element in Elementor?

How Scoped Custom CSS Works

Every widget, column, and section has its own Advanced tab, and Pro users see a Custom CSS field there. Writing selector { color: red; } in that field applies the rule specifically to that element's own wrapper, since Elementor automatically substitutes selector with that element's actual generated class behind the scenes — no need to inspect the page and copy an actual class name.

When This Approach Makes Sense

A one-off tweak needed on just a single specific element, where a site-wide custom CSS rule would risk unintentionally affecting other elements using similar classes.
Fine-tuning something Elementor's own style controls don't expose directly, like a specific pseudo-class state or an unusual property Elementor's panel doesn't offer a dedicated control for.
This is a Pro-only feature — free Elementor users needing custom CSS have to add it through the WordPress Customizer's Additional CSS instead, which applies site-wide rather than to one element.
Overusing per-element custom CSS across many elements individually can become harder to maintain than a single organized stylesheet, worth considering for designs needing extensive custom styling.

Adding Scoped CSS

Select the element and open its Advanced tab.
Open the Custom CSS panel and write rules using selector in place of the element's own class.
Preview immediately in the editor to confirm the styling applies as expected.

Need custom styling built properly across your Elementor site? See Elementor customization.