Hiding a CSS selector

ralphlombreglia · October 27, 2020, 5:18pm

The Accordion widget in WPBakery Web page builder produces this code:

<div class="vc_toggle_title">
  <p style="font-size: 18px;color: #000000;line-height: 3;text-align: left;font-family:Roboto Slab;font-weight:400;font-style:normal" class="vc_custom_heading sector-name">AGRICULTURE</p>
  <i class="vc_toggle_icon"></i>
</div>

I would like to eliminate this line:

<i class="vc_toggle_icon"></i>

I have tried everything in the book without success, including the most obvious:

.vc_toggle_icon { display:none;}

Any suggestions?

DanCouper · June 8, 2020, 5:28pm

Normally you’d use !important, like

.vc_toggle_icon { display:none !important; }

To override problematic external styling that’s outside your control.

ralphlombreglia · June 8, 2020, 5:53pm

Hi Dan. I’m grateful for your attempt to help. Unfortunately, adding “!important” didn’t change anything on my end. I’ve tried pasting an image of my web page into this comment. --Ralph

DanCouper · June 8, 2020, 5:54pm

You’ll need to look in the developer tools and inspect than element to see what the rules applied to it are