有条件的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存在，那么

回答

相关问题