title: How to override CSS styles of component in Angular?
body: <p>I have a custom component <code>&lt;app-button&gt;&lt;span&gt;&lt;/span&gt;&lt;/app-button&gt;</code>.</p>
  
  <p>It has CSS styles like:</p>
  
  <pre><code>span:hover {
     color: red;
  }
  </code></pre>
  
  <p>When I use this component in another and tried to apply CSS styles in parent component it has not effect:</p>
  
  <pre><code>&lt;app&gt;
  &lt;app-button&gt;&lt;/app-button&gt;
  &lt;/app&gt;
  </code></pre>
  
  <p>Inside <code>app</code> component I have tried:</p>
  
  <pre><code>  app-button span:hover {
         color: green;
      }
  </code></pre>
  
  <p>It does not work for me</p>