css选择孩子，如果其他孩子有图像

Question

我有一些div元素显示彼此相邻。

<div class="parentdiv"> 
    <div class="article-teaser-text2"> 
      some text ...<a href="http://example.com">Lees meer</a>  
    </div> 
    <div class="article-teaser-image"> 
      <img src="somimage.png" >  
    </div> 
</div> 

我想要做的第一个div宽，如果第二个div不包含图像

是更多钞票来选择div.article-teaser-text2如果div.article-teaser-image > img

我想是这样的：

div.article-teaser-image > img ~ div.article-teaser-text2 

但是，如果我没有弄错，那将会选择div.article-teaser-text2，如果它是img的兄弟。

我知道我能做到这一点的jQuery，但我正在寻找一个解决方案CSS

Answer 1

号目前的规范没有这样的选择，并有很好的理由。考虑这个比喻。

作为人类，我们继承了我们父母的特征 - 肤色，眼睛的颜色，身高和众多其他物理属性。现在我们可以自由地推翻一些或所有这些特征，但我们可能会从来没有定义我们父母的特质。

把这个比喻转换成CSS并理解子元素不应该定义父元素的特征。

应用此策略有一个解决方案。

<div class="parentdiv HASimage"> 
    <div class="article-teaser-text2"> 
      some text ...<a href="http://example.com">Lees meer</a>  
    </div> 
    <div class="article-teaser-image"> 
      <img src="somimage.png" >  
    </div> 
</div> 

请注意我是如何添加类“HASimage”的。向父级添加一个特定的类来区分是否有孩子有图像。这可以通过PHP或任何服务器端语言轻松完成。在CSS然后执行以下操作：

.parentdiv .article-teaser-image { 
    normal traits (without image) 
} 
.parentdiv.HASiamge .article-teaser-image { 
    override traits and add extra traits (with image) 
} 

希望推动你在正确的方向。

问候。