How to write css selector for selecting element before a given element

Question

I have two elements inside a wrapper div. The second sibling in the view sometimes get an active class (as per the logic of UI)

   <div id="wrapper">
     <div>some content</div>
     <div class="active">some other content</div>
   </div>

In those cases (when second child has an active class) - How can I target the 1st div from a css selector.

I've tried general sibling of the active div

.active ~ div

But this doesn't work since the target div should follow the selected div and should not be before it.

How to target a div which comes before another active div.

You can't. However, you can select things that are *not* `.active`, and also make use of `:first-child()`. — Obsidian Age, Dec 10 '19 at 03:26

score 0 · Answer 1 · answered Dec 10 '19 at 05:09

0

You can target the div which is not active (inside wrapper class)

.wrapper {
  > div:not([class='active']) {
    // apply styles 
  }
}

answered Dec 10 '19 at 05:09

Umesh

there maybe a case - when the first div is active and second is not active - then this would mean the second div. but i want the scenario only when the second is active - and in that scenario - the 1st div – Probosckie Dec 10 '19 at 08:35
Sorry I didn't understand. The above CSS will be applied to the div which is NOT active, regardless it is first or second. Does it make sense? I can provide a fiddle or codepen if you like – Umesh Dec 11 '19 at 01:50
only when the second is active - i want to select the 1st. If the 1st is active - i dont want that selector to select the 2nd – Probosckie Dec 11 '19 at 06:48

1 Answers1