Css-селектор, когда html-документ находится внутри iframe?

Я пытаюсь сделать css-селектор, который назначает разные свойства на основе погоды, html находится внутри iframe или нет. Я пробовал это:

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

Я ожидаю, что это применит background: black; к телу, если оно внутри iframe, но это не так, почему? И есть ли какие-либо опции css? Я всегда мог проверить с помощью javascript, если html является root.

Поддержка IE8 не требуется.

Ответ 1

CSS только в пределах одного документа. Iframe - это собственный документ целиком, поэтому правило CSS, которое применяется к странице, содержащей этот iframe, не может применяться к странице, которая находится внутри этого iframe.

Это означает, что в отношении HTML и CSS html всегда :root (и поэтому может никогда быть :not(:root)).

Если вы не можете перенести этот CSS с содержащейся страницы на страницу в iframe (например, с помощью script), я не верю, что есть способ использовать только CSS.

Ответ 2

Возможно, возможно сделать стиль в iframe с JavaScript.

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

ВАЖНО: Убедитесь, что iframe находится в одном домене, иначе вы не сможете получить доступ к его внутренним компонентам. Это будет межсайтовый скриптинг.

Доступ к элементам внутри iframes с текстом JavaScript здесь: Javascript - Получить элемент из iFrame

Ответ 3

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

Работа