Da para fazer com uma técnica de CSS usando order
.
Com isso vc pode aplicar uma regra de CSS usando o seletor +
Com o order vc vai mostrar visualmente na tela, o Title
antes do Time
, mas no DOM
o Time
vai vir antes do Title
, assim vc aplica o CSS com time+title { seu css }
Para usar order o container pai tem que ser flex
ou grid
, e assim vc coloca order: -1;
no title
para ele sempre ser o primeiro elemento na tela (não no DOM).
Veja o exemplo para entender melhor, repare que no código o Time
está antes do Title
, mas na visualização na tela o Title
está antes do 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>
order
na casa não resolva :Dtime
e outra sem otime
.