title: How to style child components from parent component's CSS file?
body: <p>I've got a parent component:</p>
  <pre><code>&lt;parent&gt;&lt;/parent&gt;
  </code></pre>
  <p>And I want to populate this group with child components:</p>
  <pre><code>&lt;parent&gt;
    &lt;child&gt;&lt;/child&gt;
    &lt;child&gt;&lt;/child&gt;
    &lt;child&gt;&lt;/child&gt;
  &lt;/parent&gt;
  </code></pre>
  <p>Parent template:</p>
  <pre><code>&lt;div class=&quot;parent&quot;&gt;
    &lt;!-- Children goes here --&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Child template:</p>
  <pre><code>&lt;div class=&quot;child&quot;&gt;Test&lt;/div&gt;
  </code></pre>
  <p>Since <code>parent</code> and <code>child</code> are two separate components, their styles are locked to their own scope.</p>
  <p>In my parent component I tried doing:</p>
  <pre><code>.parent .child {
    // Styles for child
  }
  </code></pre>
  <p>But the <code>.child</code> styles are not getting applied to the <code>child</code> components.</p>
  <p>I tried using <code>styleUrls</code> to include the <code>parent</code>'s stylesheet into <code>child</code> component to solve the scope issue:</p>
  <pre><code>// child.component.ts
  styleUrls: [
    './parent.component.css',
    './child.component.css',
  ]
  </code></pre>
  <p>But that didn't help, also tried the other way by fetching the <code>child</code> stylesheet into <code>parent</code> but that didn't help either.</p>
  <p>So how do you style child components that are included into a parent component?</p>