CSS: selecting an element only if it contains a specific element

Question

I am creating a print stylesheet and would like to hide all figure tags only if that tag contains an iframe, which happen to be embedded YouTube videos. If the figure tag contains anything else (i.e. an img), I want the tag and its contents to still be shown on the printed page.

I know that I could simply apply a class of "video", for example, to my figure tag where appropriate, but I want to see if there is a way to accomplish this via CSS without resorting to adding classes throughout my site. Also, even though I know they exist, I am not looking for a jQuery solution.

Thank you!

Praveen >> I don't believe the browser support is high enough yet for that to be a viable solution at this point. — CanuckInSC, Dec 28 '12 at 18:26
Shmiddty>> I had tried just hiding the iframe, but soon came to realize that I also needed the associated figcaption to also be hidden. I was able accomplish that with iframe ~ figcaption, but then was left with a figure tag that created an empty area on my printed sheet due to attributed margins and padding. Alas, that is why I would like to see the entire figure be hidden instead of just its individual contents. (I have edited my original post to hopefully make that more clear.) — CanuckInSC, Dec 28 '12 at 18:32
@BoltClock http://davidwalsh.name/css4-preview see the first one! Or am I wrong? — Praveen Kumar Purushothaman, Dec 28 '12 at 18:40

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

You are looking for a parent selector

CSS3 has none, but CSS4 has one that is like selecting using $.

Here are some similar questions with similar results:

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 28 '12 at 18:21

Praveen Kumar Purushothaman

154,660
22
177
226

4

FYI, the `$` syntax is already dropped. Nobody knows what the syntax is going to be eventually. – BoltClock Dec 28 '12 at 18:43
Okay. Lets see... Something is there for the CSS 4 then... :D Waiting... :D – Praveen Kumar Purushothaman Dec 28 '12 at 18:44

CSS: selecting an element only if it contains a specific element

1 Answers1

You are looking for a parent selector

Here are some similar questions with similar results: