CSS conditionnel (si div présent, set top = x, sinon, set top = y)

Question

J'ai un div relativement positionné (appelez-le "marker") dans mon balisage qui influence la position "y" supérieure d'un frère positionné enfant div (appelez le "sujet").

La div de marqueur peut être présente ou non dans le balisage. Comment puis-je écrire le css pour le div enfant sibling de sorte que sa position supérieure soit augmentée de 100px lorsque le div marqueur est présent dans le balisage.

Voici le balisage lorsque le div marqueur est présent ...

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

Le « sujet » div est celui que je dois la hauteur conditionnelle définie dans css.

Voici le balisage lorsque le div marqueur n'est pas présent ...

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

Answer 1

Est-ce que les travaux suivants?

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

~ est le sélecteur de frère adjacent; .marker ~ .sidebar correspond à un élément de classe sidebar qui se trouve après un élément de classe et partage le même parent.

Il existe un excellent didacticiel sur les sélecteurs de fratries, etc. here.

Answer 2

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

Cela devrait appliquer à tous les frères et sœurs de votre marqueur div, mais probablement vous voulez faire des sélecteurs séparés les uns des autres div (parce que probablement vous ne voulez pas tout avoir « top: 100px; »)