Css–selector for when a html-document is inside an iframe?

Question

I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:

html:not(:root) body {
    background: black !important;
}

I expect this to apply background: black; to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.

IE8 support not requierd.

Answer 1

CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.

This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).

Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.

Answer 2

It is probably possible to do the styling in an iframe with JavaScript.

document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';

IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.

Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame