有條件的CSS：如果兄弟的子div存在，那麼

在下面的html片段中，我只想要「main」div有一個背景圖像，如果「menu」div不存在於標記中。這可能嗎？有條件的CSS：如果兄弟的子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>

來源

2010-12-03 Scott B

這沒有CSS選擇器。您的選擇是將類放在main的父元素上或使用JavaScript。 – Keyo 2010-12-03 06:09:17

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。

的javascript：

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

CSS：

body.no_menu .main{ 
    background:pink; 
}

來源

2010-12-03 06:17:51 Keyo

你可以第二類添加到您的主<div>只用來添加你想要的背景。然後，當您創建標記時，如果需要，只需將第二個類說明符添加到<div>;如果不需要，可以省略。

div.main { 
    //main stuff 
} 

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

當你的菜單DIV存在，您可以使用此：

<div class="main mainbg">

時，它的失蹤，你堅持：

<div class="main">

來源

2010-12-03 05:56:30 AgentConundrum

如果重新排列你的HTML像這樣唯一的純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>

那麼你可以使用此CSS只適用財產）：

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

在這個例子中

，你可以在工作中看到：http://jsfiddle.net/tYhxr/
（通過刪除菜單股利和重新運行測試）

檢查Keyo's asnwer了有關選擇如何工作的鏈接。

如果你不能改變html，那麼javascript是最好的選擇。

我希望這會有所幫助。

來源

2010-12-03 07:04:50

有條件的CSS：如果兄弟的子div存在，那麼

回答

相關問題