根据同一div中是否存在不同的类来隐藏类

Question

如果同一div中存在其他类，我一直在尝试通过CSS隐藏类。

div情况：

<div class="tripdetails">
 <div class="tripavailable OR tripunavailable">
 </div>
 <div class="soldoutform">
 </div>
</div>

在“或”部分中，有第一类或第二类名称。如果它是第一个“可使用的”，则应隐藏“ soldoutform”类。

我尝试了以下操作，但到目前为止未成功：

.tripavailable.soldoutform {
    display: none;
}

Answer 1

使用+运算符，您可以定位下一个兄弟姐妹或~来定位任何兄弟姐妹。

.tripavailable+.soldoutform {
  display: none;
}

<div class="tripdetails">
  <div class="tripavailable">
  </div>
  <div class="soldoutform">
    soldoutform
  </div>
</div>

Answer 2

就像在同一元素中一样，您可以使用一个进行中的同级选择器，例如+：表示直接同级：

.tripavailable. + .soldoutform {
    display: none;
}