CSS Select div whose immediate sibling is NOT p

Question

I have this situation:

The transition on entering is, after 1sec delay, then fade-in to 100% opacity:

transition: opacity 1s ease 1s;

The transition on leaving is, within 1sec fade out to 0% opacity:

transition: opacity 1s;

The .leaving element is removed after 1second. After it is removed I want position:static on the .entering

So in other words: "when .entering is not followed by .leaving, apply position:static" and "when .entering is followed by .leaving it should be position:absolute"

I'm trying this

.entering {
position: absolute;
}

.entering:not(+ .leaving) {
position: static;
}

However its not working. Any ideas?

Let's do this example in a simplified case, with background colors. If .entering is followed by .leaving, it's background color should be red. If .entering is followed by non-.leaving (or followed by nothing), its background color should be green.

For instance:

and when not followed by leaving:

I tried this color case here in this fiddle - https://jsfiddle.net/Noitidart/7utx2uwc/

<style>
.entering {
background-color:red;
}
.entering:not(.entering + .leaving) {
background-color:green;
}
</style>

<div class="entering">entering</div>
<div class="leaving">leaving</div>

You can use only simple selectors within `:not` and so `:not(+ .leaving)` or `:not(.entering + .leaving)` will not work. Also, you cannot style an element depending on what its sibling is and so this is a no-go with CSS. — Harry, Jan 16 '16 at 06:40

Saqib Amin · Answer 1 · 2016-01-16T06:39:09.460

2

Please change ordering of both divs and then use CSS to style them:

HTML

<div class="leaving">leaving</div>
<div class="entering">entering</div>

CSS

.entering {
  background-color:red;
}
.leaving + .entering {
  background-color:green;
}

Please see the demo: https://jsfiddle.net/7utx2uwc/3/

edited Jan 16 '16 at 06:39

answered Jan 16 '16 at 06:31

Saqib Amin

1,171
7
16

Thanks @Saqib I will test right now, I added a simplified test case with background colors :) – Noitidart Jan 16 '16 at 06:32
It didn't work :( It applied to the non-leaving div, please see - https://jsfiddle.net/Noitidart/7utx2uwc/2/ - http://i.imgur.com/pjWfwCn.png – Noitidart Jan 16 '16 at 06:33
1

Can you change the order of two divs? – Saqib Amin Jan 16 '16 at 06:36
I tried that but I couldnt :( I even tried display:flex and flex-direction:column-reverse but it wouldn't actually change the order in the dom, just the visual order. :( – Noitidart Jan 16 '16 at 06:38
1

Updated the answer above with changed ordering. It works fine – Saqib Amin Jan 16 '16 at 06:39
Thanks yes it works good if its reverse. The problem is I am using ReactJS animation framework. And the "entering" element is always placed first. :( – Noitidart Jan 16 '16 at 06:42
1

Then only possible way would be add classes dynamically to the elements while your animations are being carried out. – Saqib Amin Jan 16 '16 at 06:43
Aw darn, ok thanks Amin! – Noitidart Jan 16 '16 at 07:08

score 1 · Answer 2 · answered Jan 16 '16 at 06:47

You asked

If .entering is followed by .leaving, it's background color should be red. If .entering is followed by non-.leaving (or followed by nothing), its background color should be green.

You can not select the element in upward direction. In other words you can not style the upper element based on child or next sibling.

This is how CSS works. Therefore, we need jQuery or JavaScript. So it can not be done using CSS only.

CSS Select div whose immediate sibling is NOT p

2 Answers2