0

I'm trying to target a div with no ID or class, and nth-child seems perfect for this, but I can't seem to get it to work. I even copied the exact selector in Safari's web inspector, but using that still has no effect. Here's what I'm seeing, with the desired div highlighted in the Inspector.

Screenshot of site and code

I want to eliminate the unneeded space on the bottom of the ticketing box (just below the Add to Cart button) - the third div under "div.card". I'm also throwing in a couple of extra styles that are not overrides, just to make sure I'm reaching the right div, but they aren't displaying.

The selector that Web Inspector provides is

#widget > event-ticket-widget > div > div.card > div:nth-child(3)

But it simply doesn't work and I'm hitting a wall here... hope someone can point me in the right direction.

Thanks!

Johannes
  • 64,305
  • 18
  • 73
  • 130
Adam Abrams
  • 107
  • 1
  • 11

1 Answers1

0

NEW ANSWER:

I just realized that this element is inside an iFrame. You cannot affect the contents of an iFrame via CSS!

But there is a workaround for this particular situation: You can apply a negative margin to the wrapper of that iFrame, which will make it less high:

#elevent-ticket-widget {
    margin-bottom: -150px;
}

And if you only want to apply this to that particular page, you can add the page-id class to the selector: .postid-3896 #elevent-ticket-widget { ... }

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks Johannes, but my attempt to do the same produced no results for some reason... `#widget div.container-fluid.position-relative.no-padding > div.card > div:nth-child(3) { height: 1em !important; border-bottom: 2px solid green; }` In fact I don't even see this CSS anywhere in the (safari) Web inspector. What gives? BTW, the actual link is: http://www.vjff.org/events/event/and-then-she-arrived/ – Adam Abrams Sep 27 '17 at 21:36
  • I had seen the link in your screenshot, had already gone to the page and added a new rule with that selector right there in the browser tools, and it worked (in Firefox), so I am really wondering... – Johannes Sep 27 '17 at 21:40
  • ah, I just discovered that all that is inside an iFrame! You can't affect the contents of an iFrame via CSS! But there *is* a possibility / workaround: I'll add it to my answer in a minute. – Johannes Sep 27 '17 at 21:46
  • I'm hoping for that workaround! Keep me posted... and thanks! – Adam Abrams Sep 28 '17 at 05:24