On my blog, the Pinterest button creates a small gap underneath the footer. Looking at the code, the cause is the iFrame that the Pinterest javascript embeds in the page. It looks like this:

<iframe src="//assets.pinterest.com/pidget.html?r=862117.4577227819#via=http%3A%2F%2Flocalhost%3A8888%2Finternet-security%2F&amp;type=pidget" height="0" width="0" frameborder="0" class="PIN_1361148986939_log"></iframe>

I can use Chrome's dev tools to apply display: none; to it, but here's the problem: The class changes every time you load the page.

Is there a way to targe this specific iFrame in CSS without using the class name?

  • What if you wrap iframe with html element e.g. div or span and give a specific name to it e.g. class="pinterestBug87315" and then in your css you will be able to do following .pinterestBug87315 iframe { diplay: none; }
    – Ed T.
    Feb 18, 2013 at 1:45

1 Answer 1


You can select every iframe, just by writing:


If you have multiple iframes, and this is the only one you want to apply this styling to, you can write something like this:


Note: Not really a WordPress question, but pure CSS related.

  • Thanks - worked like a charm! Sorry I put this in the wrong forum. Feb 18, 2013 at 2:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.