Ways to add CSS to class2 only if class1 exists?-CodePudding

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)

CodePudding user response：

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

CodePudding user response：

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}