Apply CSS by conditioning when two classes are together

Question

I have two situations:

<div class="content">
    <span class="title">Título</span>
    <span class="time">12:00</span>
</div>

and

<div class="content">
    <span class="title">Título</span>
</div>

When "time" exists, I need to apply a style to both the "time" class and the "title" class. And when there is no "time" I need "title" to have another style.

Answer 1

To do with a CSS technique using order.

With this you can apply a CSS rule using the selector +

With the order vc will show visually on the screen, the Title before the Time, but in the DOM the Time will come before the Title, so you apply CSS with time+title { seu css }

To use the container father has to be flex or grid, and so you put order: -1; in the title for it to always be the first element on the screen (not in the DOM).

See the example to better understand, note that in the code the Time is before the Title, but in the display on the screen the Title is before the Time

.content {
  display: flex;
}

.title {
  color: red;
  order: -1; /* com isso o title sempre vai vir antes do time na TELA, não no DOM */
}
.time + .title { /* condição que aplica cor diferente no title, caso haja o Time no DOM */
  color: blue; 
}

.time {
  color:green;
}

<div class="content">
  <span class="time">12:00 </span> 
  <span class="title"> Título </span><br>
  <i> quanto tem time o title fica blue</i>
</div>
<br>
<div class="content">
  <span class="title"> Título </span><br>
  <i> quando não tem time o title fica red</i>
</div>