how to remove element { background color in css using browser extension?

Question

How to remove the element background color using browser extension for a online website? I want to remove this color for add this website in OBS?
I've tried this:

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


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

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

Try using `!Important` if it's a js generated style – Kameron Jun 21 '22 at 13:00 — Kameron, Jun 21 '22 at 13:00

Alex J · Answer 1 · 2023-07-10T12:02:34.237

3

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

Example:

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

REF: https://www.w3schools.com/css//css_important.asp

edited Jul 10 '23 at 12:02

answered Jun 21 '22 at 13:05

Alex J

162
8

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 21 '22 at 14:48

score 2 · Accepted Answer · answered Jun 21 '22 at 12:59

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; 
}

score 0 · Answer 3 · answered Jun 21 '22 at 12:59

0

just write like this:

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

if didn't work add !important after transparent

answered Jun 21 '22 at 12:59

kian

1,449
2
13
21

Ibrahim Nergiz · Answer 4 · 2022-06-21T18:25:24.670

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.

Cédric · Answer 5 · 2022-06-21T13:47:45.683

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

how to remove element { background color in css using browser extension?

5 Answers5