title: How do I select the first adjacent sibling?
body: <p>I have an HTML list like so:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li class="heading"&gt;Heading 1&lt;/li&gt;
    &lt;li class="heading"&gt;Heading 2&lt;/li&gt;
    &lt;li&gt;Text Under Heading 2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Since Heading 1 has no text under it, I want to hide it with CSS. </p>
  
  <p>If I do this,</p>
  
  <pre class="lang-css prettyprint-override"><code>li.heading + li.heading { display: none; }
  </code></pre>
  
  <p>it hides Heading 2 instead of Heading 1. </p>
  
  <p>How can I hide Heading 1? Is there a way to look for adjacent siblings and select the first one?</p>