CSS Select div whose immediate sibling is NOT p

This question already has an answer here:

  • Select specific element before other element 5 answers

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:

CSS Select div whose immediate sibling is NOT p

and when not followed by leaving:

CSS Select div whose immediate sibling is NOT p

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> 

Replay

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/

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.

Category: css Time: 2016-01-16 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.225 (s). 12 q(s)