2016-05-22 7 views
0

div1が表示されている場合にのみ、div2にCSSスタイルを適用するソリューションを探しています。どうやってやるの?別のdivに基づく親divのスタイル

<div class="div1"></div> 
<div class="div2"></div> 

<style> 
    /* when div1 is NOT present */ 
    .div2 { 
     margin: 100px auto 100px auto; 
    } 

    /* when div1 IS present */ 
    .div2 { 
     margin: 0 auto 100px auto; 
    } 
</style> 

答えて

3

ませんJavascriptが必要なの可視セレクタを。 .div1要素は、(あなたのサンプルコード内のコメントのとおり)DOMに存在しない場合、こののみ適用されます。もちろん、

.div2 { 
    margin: 100px auto 100px auto; 
} 

.div1 + .div2 { 
    margin: 0 auto 100px auto; 
} 

:あなたはこれを達成するためにCSS「兄弟」セレクタを使用することができます。 div1が存在するが隠れているときにこれを行うには、JSを使用する必要があります。

+0

問題ないです。喜んで助けてください。 –

+0

恥ずかしがり屋の代わりにではなく、兄弟を前に見つけるためにマイナスを使うことはできません! –

+0

@ Le-royそれは良い考えのように聞こえるが、あまり意味がない。以前の要素の状態が何であるかを知る必要があると感じたら、間違った天使から問題に近づいています。ここで私の答えを見てください。 – Narxx

-1

少しjQueryのは、常に使用し、役立ちます:jqueryの

if($('.div1').is(':visible')) 
{  
    $('.div2').css('margin','0 auto 100px auto'); 
} 
else 
{ 
    $('.div2').css('margin','100px auto 100px auto'); 
} 
+0

なぜdownvoteは、説明するように気をつけますか? – Varun

0

行動のこの種を行うための適切な方法でも<body>可能性があり、そこからあなたが純粋にCSSによって、あなたが望む任意の動作を設定することができます(そのトップレベルの親に基本クラスを設定している。

.menu_open .div1 { 
 
    display: block; 
 
} 
 

 
.menu_open .div2 { 
 
    display: none; 
 
} 
 

 
.div1 { 
 
    display: none; 
 
} 
 

 
.div2 { 
 
    display: block; 
 
}
<body class="menu_open"> 
 
    <div class="div1">Div1</div> 
 
    <div class="div2">Div2</div> 
 
</body>

今、あなたは、JSを使用して<body>クラスの状態の間で切り替えることができ、あなたは他の兄弟に独立した任意の他の要素に複雑な動作を設定することができます。

関連する問題