Ways to add CSS to class2 only if class1 exists?

Question

I want to make class2 {display:none;} but only if class1 exists.

Basically I have an age-gate plugin which, when triggered/visible, is selectable via the "age-gate-form" class.

I want to have another class, "banner", be invisible when age gate is visible/triggered.

Is this doable without touching JS/jQuery? How is it doable?

I tried to check other answers and google a bit but I'm not sure i've found anything to do exactly what I need.

EDIT: 2 classes are

.age-gate-wrapper < If this exists Then

.pum-container {display:none !important;}

I tried to

.age-gate-wrapper.pum-container {display:none !important;}

on the page where both classes existed but it didnt work, pum-container is still visible

The two classes are in different elements (age-gate comes first)

Where are these class names in relation to each other? Please [edit your question](https://stackoverflow.com/posts/75138822/edit) to show us an example of the HTML structure, including the class names. — kmoser, Jan 16 '23 at 19:33
We do need to see relevant HTML. We cannot tell from what you have shown so far where that first class is used in relation to the second one. I assume they are not on the same element, which they would need to be for the code you have shown to work. — A Haworth, Jan 16 '23 at 20:46
Are you using Popup Maker for both popups? Or a different age gate plugin? — disinfor, Jan 16 '23 at 20:49
Not on the same element. Age gate is first, pum is lower in the code — Gary Oak, Jan 16 '23 at 20:50
Is the second a child/descendant of the first or a sibling or neither? — A Haworth, Jan 16 '23 at 20:56
Neither, unrelated elements. One is one thing, the other's another. — Gary Oak, Jan 16 '23 at 20:57
What plugin are you using for your Age Gate? Beyond that if `.age-gate-wrapper` and `.pum-container` are siblings in the same parent (like the `body`), you could use `.age-gate-wrapper ~ .pum-container { display: none }` - [~ general sibling selector](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) — disinfor, Jan 16 '23 at 21:02
.age-gate-wrapper ~ .pum { display: none !important } fixed!! Post answer for best answer — Gary Oak, Jan 16 '23 at 21:36

score 2 · Answer 1 · answered Jan 16 '23 at 19:31

2

If you want to do this only with CSS and not touch any JS/Jquery, you can do it like this.

.class1.class2{ display:none; }

This will work only if one item has both of these two classes. You can check the example here

answered Jan 16 '23 at 19:31

Zgjim Dida

score 1 · Answer 2 · answered Jan 16 '23 at 23:12

Adding my comment as an answer (since it solved the issue).

Since these are two different elements, you can use the general sibling selector: ~ since both elements are in the <body> tag:

.age-gate-wrapper ~ .pum-container { display: none }

If you need to be more specific, or override default styles you can add the !important attribute to the property style:

.age-gate-wrapper ~ .pum-container { display: none !important}

or in your case:

.age-gate-wrapper ~ .pum { display: none !important}

2 Answers2