1

Given the layout below, how can I hide #header-precursor if it's under #link-preview or #linkPreviewIframe?

enter image description here

Here is the basic layout in text form:

<p id="link-preview>
  <iframe id=linkPreviewIframe>
    #document
      <html>
        <head>..</head>
        <body>
          <div id="page">
            <div id="header-precursor">
              This is the one I want to hide
            </div>
          </div>
        </body>
      </html>

I tried #link-preview #header-precursor { display: none;} but it didn't work. I don't know much about Shadow DOM but I think that's what #document indicates, so I tried this too with no luck: #link-preview::shadow #header-precursor { display: none;}

  • You'll have to inject CSS into this iframe; the document loaded there is treated as an entirely new page by a browser. [Related question](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe). – raina77ow Jul 24 '15 at 18:01
  • So if I can modify the CSS of the source of the iframe, what would it need to look like? –  Jul 24 '15 at 18:11
  • Just `#header-precursor { ... }`. It's basically a standalone stylesheet for a standalone page. – raina77ow Jul 24 '15 at 18:14
  • But I don't want to hide that if it's not loaded in an iframe. –  Jul 24 '15 at 18:14
  • Then you'll have to use JavaScript to augment some properties of that document dynamically. – raina77ow Jul 24 '15 at 18:15

0 Answers0