Databases
StackOverflow2013
Postsdbo
POapply css to html but not iframe html
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POapply css to html but not iframe html
    text
    copied!<p>I'm making a user stylesheet for the add-on 'stylish.'</p> <p>It applies a semi-transparent dark box over the entire page for night-browsing.</p> <p>I'm using:</p> <pre class="lang-css prettyprint-override"><code>html:before { content:url()!important; position:fixed!important; width:100%!important; height:100%!important; top:0!important; left:0!important; background:rgba(2,3,3,.35)!important; z-index:99999999999999999!important; pointer-events:none!important; } </code></pre> <p>to create the fixed, overlying div.</p> <p>This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:</p> <p><img src="https://i.imgur.com/NRXJCj9.jpg" alt=""></p> <p>because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.</p> <p>the <em>desired</em> look would be:</p> <p><img src="https://i.imgur.com/a76JrhG.jpg" alt=""></p> <p>I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:</p> <pre class="lang-css prettyprint-override"><code>html:not(iframe):before{} </code></pre> <p>but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.</p> <p>I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload