Bypassing CSS rules for elements not present in the DOM

Question

Bypassing CSS rules for elements not present in the DOM

In case an element is absent from the DOM, I want to include margin space. Conversely, if the element is present, no margin space should be added. I have experimented with CSS for this purpose:

A - To ensure there is no margin-top if the H2 title is displayed on the page:

    #content > article > h2 > div > p:nth-child(1) {
        margin-top: 0;
    }

B - To add margin-top if the H2 title is not present:

    #content > article > div p:nth-child(1) {
        margin-top: 32px;
    }

I am looking for a way to prioritize the CSS configurations so that one can override the other based on whether the H2 is missing or not.

Thank you,

css

Answer 1

Answer №1

If you want to achieve this effect, you can use positioning in your CSS

Here is the code snippet:

.article {
  height: 250px;
  width: 500px;
  background: steelblue;
  position: relative;
  border: 1px solid #fff;
}
.article p {
  position: absolute;
  top:32px;
}

Check out this example for a demonstration: https://jsfiddle.net/tgo90nt2/

Find the solution in action here: https://jsfiddle.net/tgo90nt2/3/

Answer 2

If you want to achieve this effect, you can use positioning in your CSS

Here is the code snippet:

.article {
  height: 250px;
  width: 500px;
  background: steelblue;
  position: relative;
  border: 1px solid #fff;
}
.article p {
  position: absolute;
  top:32px;
}

Check out this example for a demonstration: https://jsfiddle.net/tgo90nt2/

Find the solution in action here: https://jsfiddle.net/tgo90nt2/3/

Answer 3

Answer №2

Big thanks to Brad for the assistance.

#content > article > h2 {
    margin-top: -32px;
}

#content > article > div p:nth-child(1) {
    margin-top: 32px;
}

Answer 4

Big thanks to Brad for the assistance.

#content > article > h2 {
    margin-top: -32px;
}

#content > article > div p:nth-child(1) {
    margin-top: 32px;
}

Bypassing CSS rules for elements not present in the DOM

Answer №1

Answer №2

Similar questions

Browser displaying a CSS error: "Invalid property name" while applying pseudo-element :after

Vertical alignment to the top is not possible for Inline-Block divs

Setting a static width for a specific cell in HTML5 - What's the best way to go about it?

Adjusting the transparency of the background without impacting the text itself

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Tips for adjusting the font size on the Google Maps mapType controller

Right-align the span and vertically align the header to the left

Images within links appear with blue lines underneath them

Enhancing Image Quality upon Hovering

The collapsed feature of the Bootstrap 4 Navbar is not functioning as

Update links within a designated div section

Raise the image above the wrapping div, positioning it at the very bottom

What is the best way to display a description overlay on an adjacent image when hovering over it?

A plethora of color choices in a Multi-select Box

Can anyone advise on the proper way to import CSS within a React component?

Having trouble with loading base.css in React tutorial?

The landscape orientation causes the button bar to overflow by 100% of the body height

Tips for incorporating razor isolated/code behind CSS classes into MudBlazor components

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions