CSS based on conditions for 2 specific divs

Question

CSS based on conditions for 2 specific divs

Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met.

The div with the id "flipbook-page3-front" will always be present on this HTML page.

Sometimes, another div with the id "pagesFlipbook" may also appear on the page.

These two divs are not siblings and are not positioned sequentially.

I want to style the "flipbook-page3-front" div only when the "pagesFlipbook" div is present. Is there a way to achieve this in CSS? Below is my current CSS code without any conditions:

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

html css

Answer 1

Answer №1

To ensure this code works correctly, make sure the parent div has the class pagesFlipbook.

You can write conditional CSS using the following syntax:

.pagesFlipbook .flipbook-page3-front { /* add your CSS styles here */ }

Answer 2

To ensure this code works correctly, make sure the parent div has the class pagesFlipbook.

You can write conditional CSS using the following syntax:

.pagesFlipbook .flipbook-page3-front { /* add your CSS styles here */ }

Answer 3

Answer №2

A solution to this problem is achievable, refer to the code snippet provided below...

const target = document.querySelector('#pagesFlipbook')
    if(target !== null){
        document.querySelector('#flipbook-page3-front').classList.add('custom-class-name')
    }

To implement this functionality, you can define the following CSS class...

.myconditionalclass{
width: 4000px !important; /*SET MAXIMUM WIDTH FOR IMAGES*/
  left: -800px !important;
}

Answer 4

A solution to this problem is achievable, refer to the code snippet provided below...

const target = document.querySelector('#pagesFlipbook')
    if(target !== null){
        document.querySelector('#flipbook-page3-front').classList.add('custom-class-name')
    }

To implement this functionality, you can define the following CSS class...

.myconditionalclass{
width: 4000px !important; /*SET MAXIMUM WIDTH FOR IMAGES*/
  left: -800px !important;
}

CSS based on conditions for 2 specific divs

Answer №1

Answer №2

Similar questions

Using JQuery to switch out images that do not have an ID or class assigned

Customize the Header Background Color in React Table

Why is my code throwing an error stating "Unable to assign value to innerHTML property of null"?

What is the best way to incorporate a minimum width and maximum width in CSS that add up to 100% when necessary?

Retrieve HTML content from a JSON object and render it on a web page

Is there a way to keep Angular from automatically re-sorting my list when I make edits to it?

Why is a <script> tag placed within a <noscript> tag?

Image transformed by hovering effect

Steps to dynamically reveal a table row within another row when clicked:

eliminate gaps between hyperlinks using cascading style sheets

Is there a way to adjust the placement of the h1 tag using the before pseudo-element?

Bootstrap 5 - Create a full-screen modal perfectly aligned with its parent element

Optimized layout for screen resolutions exceeding 1000 pixels wide

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

Combining various components within an inactive element tag using Vue

Struggling to get .parent().toggleClass to function properly

What is the best way to set the width of an inner element as a percentage of the Body's width?

Tips for ensuring a div stays centered while resizing the window

Troubleshooting CSS Code Issues on Myspace

Is it possible to verify the absence of an error icon when valid data is provided in Angular testing?