I am trying to style an angular 19 material select component's down arrow. This select is actually nested inside a div class="panel-details", which is nested inside another div class="panel-group". So, it looks like this: div class="panel-group" div class="panel-details" div class="panel-select" This works, but it will put a border on each select on that page. :host ::ng-deep { .mat-mdc-select-arrow { border:3px solid red; } } How can I make sure only panel-group > panel-details > panel-select class have the border? Continue reading...
