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

希望推動你在正確的方向。

問候。