我有一个HTML如下。

<div class="col-12 col-lg-6 col-md-6 account">

            <label>Account*</label>
            
 <**customcomponent**
    #hierarchyaccountsngselect
    formControlName="account"
    placeholder="Select account"
    (onChange)="onHierarchyAccountChange($event)">
    
            </**customcomponent**>
            
*<div id="error" class="invalid-input">Select one of the values from dropdown list.</div>*

</div>

在自定义组件中，我使用：host：：ng-deep访问ng-select的样式，并在字段为空时更改边框颜色。

:host ::ng-deep {
.account app-hierarchyaccounts-ng-select.ng-invalid{
    .ng-select.ng-touched {
        border-radius: 4px;
        border: 1px solid #dc3545;          
/* set div id="error" visibility hide/block here */
      }    
}
}

现在我需要设置id=“error”的div的可见性，当应用上面的嵌套类.ng-select.ng-touched时。
谁能帮我一下如何从嵌套的css中访问外部选择器？
先谢了。
我尝试使用@media查询和变量。但没找到。