CSS选择具有特定子元素的元素的同胞？

Question

这个很简单。我偏向于认为这是不可能:-(

任何想法表示赞赏。

下面的代码片段是一个更大的结构与许多。步骤元素的一部分。

我需要匹配所有.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以外的任何东西。

Answer 1

这不能与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结构）只有解决这个问题。

Answer 2

只需使用此选择第一种情况

.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);