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

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 if 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)
}

希望能把你推向正确的方向。

问候。