apply css to html but not iframe html

Question

I'm making a user stylesheet for the add-on 'stylish.'

It applies a semi-transparent dark box over the entire page for night-browsing.

I'm using:

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

to create the fixed, overlying div.

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:

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.

the desired look would be:

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:

html:not(iframe):before{}

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.

I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.

Answer 1

Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.

I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a @-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.

Something like this, which should go beneath what you already have:

@-moz-document domain(/* Facebook Like */), 
    domain(/* Tweet Button */), 
    domain(/* Google +1 */)
{
    html:before
    {
        content: none !important;
    }
}

The content: none declaration disables the pseudo-element, preventing it from being rendered.

Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.