title: Scrapy extracting <li> with span inside
body: <p>I'm trying to extract the text from this html structure:</p>
  
  <pre><code>&lt;div class="col-6 col-lg-3"&gt;
      &lt;span class="font-weight-bold"&gt;List of Birds&lt;/span&gt;
          &lt;ul class="bird-forms"&gt;
              &lt;li&gt;Crow &lt;span class="color"&gt;Black&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Peacock &lt;span class="color"&gt;Multicolored&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Dove &lt;span class="color"&gt;Multicolored&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Sparrow &lt;span class="color"&gt;Brown&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Goose &lt;span class="color"&gt;Multicolored&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;Ostrich &lt;span class="color"&gt;Multicolored&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using scrapy shell: <code>response.css('ul.bird-forms li ::text').extract()</code></p>
  
  <p><strong>I want to the result to look like this:</strong></p>
  
  <pre><code>['Crow Black', 
   'Peacock Multicolored',
   'Dove Multicolored', 
   'Sparrow Brown', 
   'Goose Multicolored',
   'Ostrich Multicolored']
  </code></pre>
  
  <p><strong>Instead of this:</strong></p>
  
  <pre><code>['Crow',
   'Black', 
   'Peacock',
   'Multicolored', 
   'Dove', 
   'Multicolored', 
   'Sparrow', 
   'Brown',
   'Goose', 
   'Multicolored',
   'Ostrich', 
   'Multicolored']
  </code></pre>