how to remove element { background color in css using browser extension for a online website. i want to remove this color for add this website in obs?

i want to remove this i try to use

main-content wf100 {
    background-color: transparent;  
}


.main-content .wf100 {
    background: transparent;    
}

#main-content .wf100 {
    background: transparent;    
}

but not work. pls help me.

enter image description here

CodePudding user response：

main-content and wf100 are two classes for the same element. So, the code will be like this--

.main-content.wf100{
   background: transparent; 
}

if this does not work, use this !important flag on CSS value.

Example--

.main-content.wf100{
   background: transparent !important; 
}

CodePudding user response：

I think you need to use !important in end of your code

Example:

.main-content.wf100 {
   background: transparent !important;    
}

CodePudding user response：

just write like this:

.main-content {
  background-color: transparent;  
}

if didn't work add !important after transparent

CodePudding user response：

First, none of your selectors are applied. The first and third one aren't because main-content is a class, so you have to use .main-content.

The second one isn't applyed to your element because you added a space between .main-content and .wf100 wich means : element with wf100 class inside a main-content element.

Without the the space (.main-content.wf100) you specify : elements with main-content and wf100 classes.

Now your selector is correct, it still doesn't work. Why ? because inline css has the highest priority after !important property that you need to use here.

Because !important has the highest priority, you can apply it to .main-content.wf100 but also .main-content or .wf100.

/* wrong selector */
.main-content .wf100{
  background-color:green;
}
/* correct selector, but not enough priority */
.main-content.wf100{
  background-color:green;
}
.main-content.second-content{
  background-color:orange!important;
}
.another-content{
  background-color:yellow!important;
}

<div style="background-color:#172132;color:white;">wf100</div>
<br>
<div  style="background-color:red;">second content</div>
<br>
<div  style="background-color:red;">another content</div>
<br>
<div  style="background-color:red;">another content without .main-content</div>

CodePudding user response：

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

Inline Styles                               - 1000
ID selectors                                -  100
Classes, Attributes and Pseudo-classes      -   10
Elements and Pseudo-elements                -    1 

So you can use !important for your CSS code.

.main-content.wf100 {
    background: transparent;    
}

The correct way to do this is to delete the inline css.