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?

closed as off topic by Michael, fuxia Feb 18 '13 at 14:28

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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 '13 at 1:45

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. – Thomas Frank Feb 18 '13 at 2:15

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