只有當它包含選擇

選擇div是否有任何CSS選擇器選擇一個父div只有當它直接包含選擇裏面？只有當它包含選擇

示例代碼：

<div class="top_level"> 
    <input type="radio"></input> 
</div> 
<div class="top_level"> 
    <input type="text"></input> 
</div> 
<div class="top_level"> 
    <select name="namehere"> 
    <option>...</option> 
    <option>...</option> 
    <option>...</option> 
    </select> 
</div>

假設我只想選擇第三個3 top_level類的div，因爲它包含一個選擇直接在它裏面，我會怎麼做呢？

我曾嘗試搜索周圍的答案，但無法找到任何。如果在CSS中可以選擇父項，那將會容易得多。

來源

2013-10-06 Ahmad

的可能重複[是否有一個CSS家長選擇？] （http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） – grc

我想這個問題可能看起來相似，但我沒有技術上要求在這裏的父母選擇器。我問是否可以根據它包含的內容來選擇一個元素。從技術上講，他們是我想的不同的問題。 – Ahmad

如果你使用jQuery，那麼你可以使用:has：

$('div.top_level:has(select)')

如果您只使用CSS，那麼答案很簡單：不，你沒有任何類似選擇家長。

來源

2013-10-06 13:37:37

我想避免在這裏使用JS ..現在尋找一個純粹的CSS解決方案。如果我找不到任何東西，那麼我會轉向JS。 – Ahmad

@Ahmad我編輯過。我很抱歉，但我不認爲有一個純粹的CSS解決方案。 –

是的，你可能是對的。我會看看如果沒有CSS，我可以做些什麼。如果不是的話，我會用它來標記你的答案。 – Ahmad

您可以使用：空的僞類檢查您的容器是否爲空（不包括換行符）。

你不能檢查它是否包含一種元素。但是，你可以調整你的標記使用方法：空選擇

如：

<div class="top_level"> 
    <input type="radio"></input> 
    <div class="list"></div> 
</div> 
<div class="top_level"> 
    <input type="text"></input> 
    <div class="list"></div> 
</div> 
<div class="top_level"> 
    <div class="list"> 
    <select name="namehere"> 
    <option>...</option> 
    <option>...</option> 
    <option>...</option> 
    </select> 
</div> 
</div>

現在你可以查詢像

.list:not(:emtpy) { 
       // to select all lists that are non-empty 
}

來源

2013-10-06 13:46:02

雖然有點hackish。 –

太小的拼寫錯誤：X您能糾正以備日後參考嗎？ – MackieeE

你能告訴我它在哪裏嗎？ –

只有當它包含選擇

回答

相關問題