从父选择器中选择兄弟姐妹

我试图完全在CSS中完成某件事。从父选择器中选择兄弟姐妹

<body> 
    <div class="box"> 
     <div>Text</div> 
     <div>Text</div> 
     <div>Text</div> 
    </div> 
    <div class="box"> 
     <div>Text</div> 
     <div class="selected">Text</div> 
     <div>Text</div> 
    </div> 
    <div class="box"> 
     <div>Text</div> 
     <div>Text</div> 
     <div>Text</div> 
    </div> 
</body>

小提琴：http://jsfiddle.net/c4bmuxze/4/

我要让所有继 “选择” 一个绿色的DIV。你如何做到这一点？你如何回到父母选择器的步骤（例如“.box”），选择所有以下兄弟姐妹（通过“〜”），然后向下选择他们的DIV？

如果所有的DIV都是直接兄弟姐妹，这完全没有问题，只是父母之间跳跃的这一步让我很难受。

我希望有一些CSS大师或有人指出明显的我。

来源

2015-10-06 LilaQ

这只能在Javascript来完成。你不能选择CSS中的父母。 – Alejalapeno

为什么你想要回到父母，然后选择它？ '.box .selected + div'你在找那个吗？ –

http://stackoverflow.com/a/1014958/2686143 – guvenckardas

不可能与CSS，但你可以帮助jQuery选择父。

$('.selected').parent().addClass('contains-selected');

.selected { 
 
    color: red; 
 
} 
 
.limegreen { 
 
    color: limegreen; 
 
} 
 
.selected ~ div { 
 
    color: limegreen; 
 
} 
 
.contains-selected.box ~ div { 
 
    color: limegreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="box"> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    </div> 
 
    <div class="box"> 
 
    <div>Text</div> 
 
    <div class="selected">Text</div> 
 
    <div>Text</div> 
 
    </div> 
 
    <div class="box"> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    </div> 
 
    <div class="box"> 
 
    <div>Added Text</div> 
 
    <div>Added Text</div> 
 
    <div>Added Text</div> 
 
    </div> 
 
</body>

来源

2015-10-06 10:09:11

我已经有这样的东西，我的CSS-only方法是为了避免这种情况，因为在我的情况下，这是一个非常有问题的解决方案。 – LilaQ

这真的是效率低下。只需向父级添加一个类，如'.contains-selected'，并为其余的使用CSS同级选择器 – Alejalapeno

@Alejalapeno你需要手动添加/删除它，如果从孩子中删除了'selected'，它将自动失效。例如：一个动态选择的东西的用例，而不是静态代码 –

从父选择器中选择兄弟姐妹

回答

相关问题