how do I style a particular ELEMENTOR section using the native wordpress customize>additional css?

user_17352364 0
Viewed 522

.elementor-widget-image{
   display: none;
   }
<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">

<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">

Other pages within this same elementor theme make use of this exact HTML code where I added a section.

When I style the intended page using the .elementor-widget-image, this style is applied to every other page that has a section like this.

I am trying to target the ID(ie. data-id"6806127") so that the styling affects only this page.

Please help.

elementor wordpress css html
1 Answers

You can just use the data attribute directly as CSS selector to style it

[data-id="6806127"] {
    /* Styles */
}

Working Example

[data-id="6806127"] {
  background: red
}
<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">abc</div>

user_26926880
Related