Select siblings from parent selector

Question

I'm trying to get something done purely in 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>

Fiddle: http://jsfiddle.net/c4bmuxze/4/

I want to make all the DIVs following the "selected" one green. How do you accomplish this? How can you go back a step to a parent selector (e.g. ".box"), choose all the following siblings (via "~") and then go down to select the DIVs from them?

If all the DIVs were direct siblings this would be no problem at all, just this step to hop between parents is making this hard for me.

I'm hoping for some CSS guru or someone pointing out the obvious to me.

This can only be accomplished in Javascript. You cannot select parents in CSS. — Alejalapeno, Oct 06 '15 at 10:09
Why would you want to go back to the parent and then select it? `.box .selected + div` Are you looking for that? — m4n0, Oct 06 '15 at 10:11
@ManojKumar I'm trying to select ALL the DIVs after `.selected`, even in the `.box` below, not only directly following siblings. Too bad this seems to be impossible with CSS — LilaQ, Oct 06 '15 at 10:13
Yeah, you can't go up and then into different containers/.boxes with pure CSS unfortunately :(. This is just logic that doesn't exist. — Andy Furniss, Oct 06 '15 at 10:15

m4n0 · Answer 1 · 2015-10-06T10:33:17.840

0

Not possible with CSS, but you can take help of jQuery to select the parent.

$('.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>

edited Oct 06 '15 at 10:33

answered Oct 06 '15 at 10:09

m4n0

25,434
12
57
77

I already have something like that, my CSS-only approach was to avoid this, since it's a really buggy solution in my case – LilaQ Oct 06 '15 at 10:19
This is really inefficient. Just add a class to the parent like `.contains-selected` and use CSS sibling selectors for the rest. – Alejalapeno Oct 06 '15 at 10:20
@Alejalapeno You will need to add/remove it manually. This will automatically be ineffective if `selected` is removed from the child. For eg: a use case of something being selected dynamically and not static code. – m4n0 Oct 06 '15 at 10:23
What? I'm just saying rather than have jQuery add the class to all of the following `.box` elements why not just have it add one class to the parent. That way you can use `.contains-selected ~ .box div`. – Alejalapeno Oct 06 '15 at 10:29
1

Got it. nextAll will traverse all the elements and add classes to them which will be slower. Changed the code according to your suggestion. Thanks! :) – m4n0 Oct 06 '15 at 10:34

Select siblings from parent selector

1 Answers1