CSS Angular2- How to apply css to nested element inside one component?

Question

I have one angular component with the html as following:

<!-- dynamic content generated runtime -->
<div class="test">
      <div class="testinside">
        HELLO
      </div>
    </div>

Now I want to style for one class in the part of [dynamic content generated], so my scss as following:

:host {

  display: inline-block;
  vertical-align: middle;

  > .test > .testinside {
    color: red;
  }

  > select {
    display: inline;
  }

  > .combobox-container > .input-group {
    color: red;
  }
}

[.combobox-container > .input-group] is the css setting for the dynamic content.

However, it seems that the css for dynamic content is not effected :( (the css for static content is OK)

The dynamic content is as following:

<common-combobox _ngcontent-hdj-67="" ...>
<!-- dynamic content generated runtime -->
  <div class="combobox-container combobox-selected"> 
    <input type="hidden" name="" value="2"> 
    <div class="input-group"> 
        <input type="text" autocomplete="off" placeholder="Anrede" class="combobox"> 
        <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span> 
    </div> 
  </div>

  <div _ngcontent-hdj-35="" class="test">
    <div _ngcontent-hdj-35="" class="testinside">
      HELLO
    </div>
  </div>
</common-combobox>

Can anyone help me to show the points I missed?

Answer 1

Use :host /deep/ to force child component use style

https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-

Here is Live example from Angular, see hero-detail.component.css

---

Update from @Joseph Briggs

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

In short, ::ng-deep will replace :host /deep/until next notification from Angular.