CSS, How to combine host-context with host selectors

I’m trying to create a css selector which check if a parent component has a specific css class + the host component has a specific css class.

Parent component template:

  <div class="parent">
      <!--Child Component-->
      <app-test class="red"></app-test>
  </div>

Child component template

<input type="text">

Child component selector

    :host-context(.parent) {
      :host(.red) {
        input {
          border: 1px solid red;
        }
      }
    }

I created an stackblitz example

Hey, I think the following code should work for you:

:host-context(.parent).red {
  input {
    border: 1px solid red;
  }
}
2 Likes

Thanks @yurzui it work great :slight_smile: