CSS選擇具有特定子元素的元素的同胞？

任何想法表示讚賞。

下面的代碼片段是一個更大的結構與許多。步驟元素的一部分。

我需要匹配所有.stepText元素旁邊，是.stepTitleAndImages ul.standard

換句話說，匹配有.step父母有.stepTitleAndImages的孩子，有孩子.stepImages.standard

所有 .stepText元素

<div class="step"> 
    <div class="stepTitleAndImages"> 
    <h3 class="stepTitle"></h3> 
    <ul class="stepImages standard"></ul> 
    <div class="clearer"></div> 
    </div> 
    <div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?** 
    <div class="clearer"></div> 
</div> 

<div class="step"> 
    <div class="stepTitleAndImages"> 
    <h3 class="stepTitle"></h3> 
    <ul class="stepImages medium"></ul> 
    <div class="clearer"></div> 
    </div> 
    <div class="stepText "></div> 
    <div class="clearer"></div> 
</div>

PS：我無法修改HTML。不能使用純CSS以外的任何東西。

來源

2017-04-14 CarvedBlock

這不能與HTML結構和純粹的CSS來實現。最近解決您的問題，改變了HTML結構和純粹的CSS，是將standard類移動到它的父標籤：

<div class="stepTitleAndImages standard"> <h3 class="stepTitle"></h3> <ul class="stepImages"></ul> <div class="clearer"></div> </div>

這將允許您使用adjacent sibling selector（+），其匹配如果它是第一個的直接下一個兄弟，像這樣的第二選擇：

.stepTitleAndImages.standard + .stepText { /* Styles */ }

更靈活的方法是使用general sibling selector這將匹配第一選擇，不僅直接下單之前任何兄弟姐妹：

.stepTitleAndImages.standard ~ .stepText { /* Styles */ }

的:has僞類is in development by Mozilla，但目前還沒有任何命中穩定的瀏覽器呢。有了它，和你的HTML結構，你可以去：

.stepTitleAndImages:has(.standard) + .stepText { /* Styles */ }

不幸的是，目前不能以任何其他方式使用CSS（和你的HTML結構）只有解決這個問題。

來源

2017-04-15 07:51:41

感謝您的精心解答福斯托NA。不幸的是，我在這裏重新設計一個外部系統。無法控制HTML。 – CarvedBlock

謝謝！考慮upvoting，現在你有足夠的觀點:) –

只需使用此選擇第一種情況

.step:nth-child(1) .stepText { 
... Your CSS here 
}

對於第二個使用

.step:nth-child(2) .stepText { 
... Your CSS here 
}

對於選擇都使用

.step .stepText { 
... Your CSS here 
}

那麼你應該需要爲

的jQuery

選擇父母的兄弟姐妹是不可能只用純CSS的是，你可以通過jQuery的單行實現這一目標：

$('ul.standard').parent().siblings(".stepText").css(...your CSS here);

來源

2017-04-14 17:40:34 vkubre

謝謝你vkubre！但是，我擔心我沒有清楚地表達自己。不是你的錯。這筆交易是選擇所有與這個模式相對應的元素，分散在源文件中。我看不出有多少孩子可以做到這一點。我編輯了問題以反映真實狀態。 – CarvedBlock

選擇父母兄弟姐妹是不可能的，只有純粹的CSS，你可以通過一行jQuery來實現： ** $（'ul.standard'）。parent（）。siblings（「。stepText」）。css 'background'，'＃f55'）;但是，如果您完全知道.standard或.medium類的模式，那麼：nth-chlid（_your模式公式here_），那麼您可以使用純CSS來實現此目標 – vkubre

再次感謝@ vkubre。這使得這個特定的項目變得不可能。乾杯。 – CarvedBlock

CSS選擇具有特定子元素的元素的同胞？

回答

相關問題