title: Descendants in styled components
body: <p>In styled components imagine I have</p>
  <pre><code>let Nav = styled.div`
    height: 50px;
  
  
    ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
    }
  `
  </code></pre>
  <p>what is the difference if I do:</p>
  <pre><code>let Nav = styled.div`
    height: 50px;
  
  
    /* just added &amp; */
    &amp; ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
    }
  `
  </code></pre>
  <p>What is difference between 1st and 2nd?</p>
  <p>For example if I use <strong>1st</strong>, then in such case</p>
  <pre><code>&lt;Nav/&gt;
  &lt;div&gt;1 &lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  <p>the styles will also apply to <code>ul</code>? But if I used 2nd styles would not apply to <code>ul</code>?</p>