title: Apply CSS on content in iFrame
body: <p>I know this question isn't new but I couldn't found an answer for my case yet.</p>
  
  <p>On my site I want to show only a part of content from an URL. The URL is on my site so let's say my url is <strong>www.test.de</strong> and I want to embbed an iFrame with source from the URL <strong>www.test.de/test</strong>, but only want to show a piece of the content on this page, so not the whole one.</p>
  
  <p>I should let you know that the structure of my pages is always the same, so no specific ids or classes in elements which could be different from site to site. It's not an option to change the classes in the html structure. I tried to apply some CSS code, e.g.</p>
  
  <pre><code>iframe .test { display: none; }
  </code></pre>
  
  <p>where .test is a simple HTML element, but it is still visible. When I do</p>
  
  <pre><code>.test { display: none; }
  </code></pre>
  
  <p>the element in the iFrame is not visible anymore but on the page where the iFrame is embedded it's not there too.</p>
  
  <p>I tried to grab it with some Javascript but that didn't solve it either. Any ideas why the CSS code works on both pages but not only for the iFrame? Or is there any other solution I could try?</p>