I have a DIV that will toggle an icon on a click. It has a directive toggling a class asc on it.

<div appSortable (click)="onSort('name')">
  <app-icon-sort-asc></app-icon-sort-asc>
  <span>"name"</span>
</div>

Inside the DIV, I have an icon that is supposed to stay hidden unless the DIV it’s inside of (its immediate parent) gets classed as ascending by the directive mentioned above.

app-icon-sort-asc {
  display: none;
}

.asc>app-icon-sort-asc {
  display: inline;
}

Is there a way to refactor so that the both states are embraced in a single selector for the icon? Psuedo-code would be like so.

app-icon-sort-asc {
  display: none;

  [parent].asc>app-icon-sort-asc {
    display: inline;
  }
}

(Eventually, I plan to target the icon component from the DIV’s directive refering to its .children[0].classList. However, I got curious if the CSS can be manipulated somehow the way described above.)

This answer appears at first related but isn’t actually addressing my issue. This one may possibly be relevant. However, while reading I got mixed impressions: that it’s possible but also not quite.