Question

I have a relatively positioned div (call it “marker”) in my markup which influences the top “y” position of a sibling’s absolutely positioned child div (call it “subject”).

The marker div may or may not be present in the markup. How can I write the css for the sibling child div so that it’s top position is increased by 100px when the marker div is present in the markup.

Here’s the markup when the marker div is present…

<div class="wrapper">
    <div class="marker"></div>  
    <div class="content"></div>
    <div class="sidebar">
        <div class="subject"></div>
    </div>
</div>

The “subject” div is the one I need the conditional height defined in css.

Here’s the markup when the marker div is not present…

<div class="wrapper">
    <div class="content"></div>
    <div class="sidebar">
        <div class="subject"></div>
    </div>
</div>  

Answer 1

Does the following work?

.sidebar .subject { top: 0px; }
.marker ~ .sidebar .subject { top: 100px; }

~ is the adjacent sibling selector; .marker ~ .sidebar matches an element of class sidebar which is after an element of class marker and shares the same parent.

There’s an excellent tutorial on sibling etc. selectors here.