条件付きCSS：兄弟の子divが存在する場合、

Question

以下のhtmlフラグメントでは、 "menu" divがマークアップ内に存在しない場合にのみ、 "main" divに背景イメージが必要です。これは可能ですか？

<div class="header"> 
    <div class="siteTitle">site title</div> 
    <div class="tagline">site tagline</div> 
    <div class='menu'></div> 
</div> 
<div class="main"></div> 

Answer 1

http://www.w3.org/TR/css3-selectors/

E + F直前の任意のF要素に一致します。 ibling要素E. E：ない（S）:notは、単純なセレクタを使用していますので、残念ながらあなたは子供の特性によってフィルタリングするためにそれを使用することはできません、単純なセレクタの

編集と一致しないE要素、要素の属性のみ。

単純なセレクタは、タイプセレクタ、汎用セレクタ、属性セレクタ、クラスセレクタ、IDセレクタ、または擬似クラスのいずれかです。

ただし、メニューに.emptyクラスを追加して使用することもできます。

.header .menu:not(.empty) + .main { 
    background:pink; 
} 

この解決策は、javascriptの両方の世界で最高ですが、通常のようにCSSを使用しています。その後、

<div class="header"> 
    <div class="siteTitle">site title</div> 
    <div class="tagline">site tagline</div> 
</div> 
<div class="menu"></div> 
<div class="main"></div> 

次のことができます。

のjavascript：

if ($('.menu').length == 0){ 
    $('body').addClass('no_menu'); 
} 

はCSS：

body.no_menu .main{ 
    background:pink; 
} 

Answer 2

あなただけが欲しいの背景を追加するのに役立つ、あなたのメイン<div>に2つ目のクラスを追加することができます。次に、マークアップを作成するときに、必要に応じて2番目のクラス指定子を<div>に追加するだけです。そうでない場合は省略することもできます。

div.main { 
    //main stuff 
} 

div.mainbg { 
    background: *background-specifications*; 
} 

あなたのメニューのdiv要素が存在する場合、あなたはこの使用：

<div class="main mainbg"> 

をそして、それが欠けているとき、あなたが固執：

<div class="main"> 

Answer 3

私が見る唯一の純粋なCSSのソリューションは、あなたがそうのようなあなたのhtmlを並べ替える場合にのみ可能ですこのCSSを使用してプロパティのみを適用してください）：

この例では

.menu { background: none } 
.menu ~ .main{ background: url() } /* or .menu + .main if they are guaranteed to be adjacent to each other on the code */ 

、あなたは仕事でそれを見ることができます（メニューのdivを削除して、もう一度それを実行することによってそれをテスト）http://jsfiddle.net/tYhxr/
セレクタがどのように機能するかについてリンクについて

チェックKeyo's asnwerを。

htmlを変更できない場合は、javascriptを使用してください。

こちらがお役に立てば幸いです。