How can I style dynamically created elements within an iframe?

Question

I have a google review widget ( http://www.netrite.net/sem-tools/google-reviews-widget/ ) that spits out this code so I can put it on our website:

<script language='javascript1.1'>
var nr_placeid = 'ChIJYVDB7c00K4gRmPHHGRTz7-k';
var nr_width = 900;
var nr_height = 305;
var nr_directreviewbox = 0;
</script>
<script language='javascript1.1' src='http://www.netrite.net/google-review-    code/googlereviews.js'></script>

I want to be able to style the dynamically generated elements that are created. When I try to target the classes it doesn't work. I've also tried putting a div around this script and adding a class to that, but that doesn't work either.

I'm pretty novice with code, but does anyone know how and if it's possible to style these elements using css? I can't seem to hook onto anything.

The only thing I can do it

iframe {
  margin-left: 20px;
 }

but even this is not great b/c if we ever use another iframe it will capture both of them.

Does anyone have any ideas? Please explain simply b/c I'm not very experienced yet haha.

thank you so much!

Answer 1

You can't style the contents of the iframe if the page does not have same domain as your parent. This is to prevent XSS .