title: How to separate elements of a list which have a class?
body: <p>Given a list of elements like this:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="favourite"&gt;&lt;/li&gt;
    &lt;li class="favourite"&gt;&lt;/li&gt;
    &lt;li class="favourite"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to create a gap between the list elements which have <code>.favourite</code> and those which don't. </p>
  
  <p>Is there a way I can do this with CSS?</p>
  
  <p><strong>Edit</strong><br>
  Assume that elements with the class <code>.favourite</code> are always forced to the top of the list.</p>