Conditional CSS (if div present, set top = x, else, set top = y)

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">
开发者_如何学Python    <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>  

---

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.

---

#wrapper > div.marker ~ div { top: 100px; }

This should apply to all siblings of your marker div, but probably you want to make separate selectors for each other div (because presumably you don't want everything to have "top: 100px;")