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

.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.

htmlcsswordpresselementor


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tushar

Related Questions