title: How to use `&` and a tag on the same selector
body: <p>I am trying to write a nested selector that selects a certain tag that has a certain attribute, for example</p>
  
  <pre><code>&lt;li foo="bar"&gt;
  </code></pre>
  
  <p>To select this, <code>li[foo="bar"]</code> would work, but I want to nest it under <code>[foo="bar"]</code> using the scss <code>&amp;</code> notation because I have other things with the <code>[foo="bar"]</code> attribute (e.g., <code>&lt;div foo="bar" class="baz"&gt;</code>), and I want to group them together. When I try:</p>
  
  <pre><code>[foo = "bar"]{
    &amp;li{
      ...
    }
    &amp;.baz{
      ...
    }
  }
  </code></pre>
  
  <p>It returns an error that says <code>li</code> may only be used at the beginning of a compound selector, and if I try:</p>
  
  <pre><code>[foo = "bar"]{
    li&amp;{
      ...
    }
    &amp;.baz{
      ...
    }
  }
  </code></pre>
  
  <p>then it says <code>&amp;</code> may only be used at the beginning of a compound selector. How can I do this correctly?</p>