如何在给定元素之前编写CSS选择器以选择元素

Question

我在包装div中有两个元素。视图中的第二个兄弟姐妹有时会获得一个活动类（按照UI的逻辑）

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

在这种情况下（当第二个孩子有一个活跃的班级时）-如何从CSS选择器定位第一个div。

我已经尝试了活动div的常规兄弟

.active ~ div

但是这不起作用，因为目标div应该跟随所选的div，并且不应该在它之前。

如何定位在另一个有效div之前的div。

Answer 1

您可以定位未激活的div（在包装类中）

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