title: How to change css of an element in shadow Dom when the main dom contains a class
body: <p>This is the code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;div class="parent-div"&gt;
      &lt;div id="shadow_host"&gt;
        #shadow-root(open)          
      &lt;div class="child-div"&gt;some random things&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;      
  &lt;/html&gt;
  </code></pre>
  
  <p>I have append a shadow dom to an element. I want to change the css of the element with the class child-div when ever the main dom has a parent element with class parent-div. Is it possible to do from css like </p>
  
  <pre><code>.parent-div .child-div{
     display:none
  }
  </code></pre>