Hiding a class based on the existence of a different class within the same div

Question

I've been trying to hide a class via CSS if a different class is present within the same div.

The div situation:

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

With the OR part, there is either the first or second class name. If it's the first one "tripavailable", the class "soldoutform" should be hidden.

I've tried the following, but am thus far unsuccessful:

.tripavailable.soldoutform {
    display: none;
}

Answer 1

Using the + operator you can target the next sibling or ~ which targets any sibling.

.tripavailable+.soldoutform {
  display: none;
}

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

Answer 2

As it follows in the same element you can use a proceeding-sibling selector, e.g +: which denotes an immediate sibling:

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