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.

The body is sometimes displayed inside an iframe as a widget on third party site, and sometimes it's displayed on it's own. — Himmators, Feb 18 '14 at 01:26
You can't apply CSS from outside the iframe. An is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame. http://stackoverflow.com/questions/3286178/can-i-apply-css-to-the-elements-within-an-iframe — Nick Grealy, Feb 18 '14 at 01:58
Responded and then saw your concession that you could always use javascript, which was exactly what I was suggesting. From what I understand of how CSS operates within frames, I don't it is an option here :( — mirichan, Feb 18 '14 at 05:27
This will put some light on your issue, please [review this answer](http://stackoverflow.com/questions/16428067/apply-css-to-html-but-not-iframe-html) — Sunil Kumar, Feb 18 '14 at 05:34
@Sunil Kumar: That question is of a very different nature though. — BoltClock, Feb 18 '14 at 05:36

BoltClock · Accepted Answer · 2014-02-18T05:35:35.013

35

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.

edited Feb 18 '14 at 05:35

answered Feb 18 '14 at 05:29

BoltClock

700,868
160
1,392
1,356

1

They work very differently. Like I said, CSS is strictly per-document. – BoltClock Feb 19 '14 at 04:12

score 27 · Answer 2 · edited May 23 '17 at 12:17

27

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

edited May 23 '17 at 12:17

Community

1
1

answered Feb 18 '14 at 05:34

ThorSummoner

16,657
15
135
147

1

Using JS for detection is good, butd on't do the styling in JS: make the detection of the framing in JS, put a class (or data attribute) depending on the detection result, and apply your usual CSS file using this new class/data-attribute selector (this separates responsibilities, and allows using strict CSP) – Xenos Jun 02 '19 at 12:26
@Xenos what do you mean by "new class/data-attribute selector"? – sortas Feb 06 '20 at 11:27
1

Do `if (window.parent !== window) { document.documentElement.classList.add('inside-iframe'); }` + `html.inside-iframe { /* properties */ }` with both codes in the iframed-html page (JS detection code in parent frame would be like `document.querySelectorAll('iframe').forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));` if prefered – Xenos Feb 07 '20 at 10:24

score 2 · Answer 3 · answered Feb 07 '20 at 10:27

Posting my comment as an answer for better display, you should:

Put "is in iframe" detection code in JS, as I don't see any other way of doing so
Put CSS code inside the iframe depending on the JS result

So if all code is inside the iframe, do:

if (window.parent !== window) {
    document.documentElement.classList.add('inside-iframe');
}

html.inside-iframe {
    bkacground-color: black;
}

If you want the detection-JS-code to be inside the parent frame, go for:

document.querySelectorAll('iframe')
    .forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));

Assuming the iframe is loaded when executing this JS (otherwise, contentDocument/documentElement will not exist). You may rely, in such case, on load event of the iframe (but it seems better anyway to put "is-in-iframe" detection indise the iframe itself, as the corresponding CSS is inside the iframe too)

score 0 · Answer 4 · answered Mar 16 '23 at 18:59

0

let iframe = document.querySelector('iframe[name="marco"]');
let ele = iframe.contentWindow.document.querySelector("#someElement")

answered Mar 16 '23 at 18:59

cegprakash

2,937
33
60

score -2 · Answer 5 · edited Sep 09 '14 at 14:51

-2

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

Works

edited Sep 09 '14 at 14:51

Itay Grudev

7,055
4
54
86

answered Sep 09 '14 at 14:15

webmister

9

2

This doesn't work on Chrome 39, and I don't think it will on any other browser. – NorTicUs Jan 13 '15 at 12:50

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

5 Answers5

Linked