How do I select an element when one is nested and the other isnt?

Asked Dec 12 '17 at 04:38

Active Dec 12 '17 at 05:14

Viewed 45 times

Example:

 <div class="wrap">
    <div class="ruin">
        <span class="nest">hello</span>
        <span class="nest">bye</span>
    </div>

    <div class="select">select from nest span</div>
 </div>

CSS

.nest ~ .select {
  color: red;
}

.wall .nest ~ .select {
  color: green;
}

I dont know how to select .select from .nest. Its not a sibling of it, or a child, or a parent.

Heres a jsfiddle. https://jsfiddle.net/cugok7v0/

EDIT: Ok it is not possible with just css to select elements without a logical relationship between them. This answer here which I didnt find myself says it all.

Thankfully I found a good way to not need to nest the element and so I can use adjacent sibling selector.

edited Dec 12 '17 at 05:14

asked Dec 12 '17 at 04:38

o0o0o0o0o

You can try jQuery $('.nest').parent().next(); – Frankenstine Joe Dec 12 '17 at 04:55
Are you expecting the `.select` text to be green? It is not clear what you are expecting to happen. If so, it is not possible. – kmc059000 Dec 12 '17 at 05:02
2

No its impossible to do that with CSS selectors. Use jQuery [This will help you](https://stackoverflow.com/questions/33908787/is-there-a-css-selector-which-selects-an-element-outside-the-current-element) – DragonBorn Dec 12 '17 at 05:07
It's not possible with css. – DigitCart Dec 12 '17 at 05:11
Ok I see. I got around the problem anyway. – o0o0o0o0o Dec 12 '17 at 05:15

How do I select an element when one is nested and the other isnt?

0 Answers0