Conditional CSS on 2 divs-CodePudding

Hi I have an HTML page where I want to include CSS only if two conditions are met.

The HTML page will always have the div with id flipbook-page3-front

The HTML page will sometimes have the div with id pagesFlipbook

These divs are not siblings and are not after each other

I want to create some CSS on flipbook-page3-front only if the div pagesFlipbook is present. Is it possible. This is my CSS without any conditions:

.flipbook-page3-front{
  width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
  left: -800px !important;
}

CodePudding user response：

This will work only if you have class pagesFlipbook of parent div so it will affect.

Write conditional CSS like this.

.pagesFlipbook .flipbook-page3-front { /* write css */ }

CodePudding user response：

Yes, it is possible, please see the code below...

const element = document.querySelector('#pagesFlipbook')
        if(element != null){
            document.querySelector('#flipbook-page3-front').classList.add('myconditionalclass')
        }

You can declare in your CSS the following class to complete this...

.myconditionalclass{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
  left: -800px !important;
}