0

I tend to apply my own custom CSS documents to certain sites, since I prefer dark backgrounds with light text as opposed to the vice-versa standard, and very few sites have a "dark mode" or otherwise cater to that preference, this site itself being an excellent example.

However, I was recently stricken by something odd - an entire HTML document nested inside of another one. (I now understand this is achieved via use of an <iframe> and so it's nearly impossible to style without JS or something) I can only apply the custom stylesheet to the parent document, though.

So, long story short, I'm wondering what sort of selectors I would have to use to target elements of the nested document only - for example, selecting the <body> of the nested document. Would I refer to a body in a html in a !DOCTYPE that is also in a body? What about recursively nested documents?

Whether this nesting thing is poor practice or not does not immediately concern me -- there seems to be a valid use case for it and, regardless, I'm not building the site. What I DO care about is how to add styles to it externally.

JessLovely
  • 142
  • 1
  • 11

1 Answers1

1

Assuming you literally have a document that has been 'injected' into another document, you would simply target it with the expected identifiers:

To target elements unique to the sub-document:

body body [element] {
}

To target elements that exist within both documents, you would just use the standard:

[element] {
}

The above would apply the style to any desired element that is contained within either document.

Please be aware that you cannot style an iframe inside a document with CSS -- you'd either have to find a way to manipulate the iframe's CSS itself, or use JavaScript to target the desired elements with document.getElementById().

Hope this helps! :)

Obsidian Age
  • 36,816
  • 9
  • 39
  • 58