title: Cannot Understand the Use of :host in components in Angular2
body: <p>What i have understood of host is that if i have a child component inside a parent component and we want to style a child component from the parent component we can use :host .
  and :host-context for vice-versa.
  Please let me know if this is the right use of host .</p>
  
  <p><a href="https://angular.io/docs/ts/latest/guide/component-styles.html" rel="noreferrer">https://angular.io/docs/ts/latest/guide/component-styles.html</a></p>
  
  <p>When i try to do the same in my App it dosent work </p>
  
  <p>App component template</p>
  
  <pre><code>  &lt;div class ="top"&gt;
      &lt;h1&gt;
        Home Component
      &lt;/h1&gt;
      &lt;hr&gt;
      &lt;app-ngrx&gt;&lt;/app-ngrx&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;div&gt;
  </code></pre>
  
  <p>ngrx component template</p>
  
  <pre><code>  &lt;h3 class="mine"&gt;NGRX&lt;/h3&gt;
  
  &lt;button (click)="increment()"&gt;Increment&lt;/button&gt;
  &lt;div&gt;Current Count: {{ counter | async }}&lt;/div&gt;
  &lt;button (click)="decrement()"&gt;Decrement&lt;/button&gt;
  
  &lt;button (click)="reset()"&gt;Reset Counter&lt;/button&gt;
  </code></pre>
  
  <p>App component CSS</p>
  
  <pre><code>:host(.mine){
    color:red;
  }
  </code></pre>
  
  <p>This do not Seem to work Please help i am not able to understand.</p>
  
  <p>I looked at this question But just not able to figure out </p>
  
  <p><a href="https://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component">Angular 2: How to style host element of the component?</a></p>
  
  <p>Updated after @Gunter Answer</p>
  
  <p>In my app-ngrx template i have added </p>
  
  <pre><code>  &lt;h3 class = "mine"&gt;NGRX&lt;/h3&gt;
  
  &lt;button (click)="increment()"&gt;Increment&lt;/button&gt;
  &lt;div&gt;Current Count: {{ counter | async }}&lt;/div&gt;
  &lt;button (click)="decrement()"&gt;Decrement&lt;/button&gt;
  
  &lt;button (click)="reset()"&gt;Reset Counter&lt;/button&gt;
  </code></pre>
  
  <p>and in the app-ngrx css file i have added</p>
  
  <pre><code>:host(.mine){
    color:red;
  }
  </code></pre>
  
  <p>But even without adding mine in app component like</p>
  
  <pre><code>&lt;app-ngrx&gt;&lt;/app-ngrx&gt;
  </code></pre>
  
  <p>The h3 is red where as i feel it should be red when  <code>&lt;app-ngrx class = "mine"&gt;&lt;/app-ngrx&gt;</code></p>