title: advanced css: target last adjacent sibling
body: <p>I am trying to target the last adjacent sibling in a situation where I don't know how many siblings there will be (1 to 6).  See this plunk: <a href="http://plnkr.co/edit/JBsMUg2yl1JkbK6j8Bfj?p=preview" rel="nofollow">http://plnkr.co/edit/JBsMUg2yl1JkbK6j8Bfj?p=preview</a></p>
  
  <pre><code>   &lt;section&gt;
      &lt;div class="c"&gt;Category 1&lt;/div&gt;
      &lt;div class="c"&gt;Category 2&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="c"&gt;Category 3&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="c"&gt;Category 4&lt;/div&gt;
      &lt;div class="c"&gt;Category 5&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="c"&gt;Category 6&lt;/div&gt;
      &lt;div class="c"&gt;Category 7&lt;/div&gt;
      &lt;div class="c"&gt;Category 8&lt;/div&gt;
      &lt;div class="p"&gt;product&lt;/div&gt;
      &lt;div class="c"&gt;Category 9&lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>My best efforts still left me with this missing: Category 3 SHOULD be selected; Category 7 should NOT be selected.</p>
  
  <pre><code>div {
    padding: 5px;
    margin-bottom: 5px;
  }
  
  .c {
      color: yellow;
      background: blue;
      opacity:.1;
  }
  .c+.c {
      opacity:1;
  }
  .p+.c { 
      color: yellow;
      background: blue;
  }
  
  .c:last-child { /* orphan cat on end of list */
       opacity:.1;
  }
  </code></pre>
  
  <p>I cannot easily change my html, nor put a class on the last adjacent sibling.</p>
  
  <p>The background: this is a catalog rendered by angular ng-repeat on a flat array that contains category headings followed by products.  The ng-repeat uses a text filter (from a search box) which ignores the category headings (otherwise they would likely all be hidden) and applies only to the products. I therefore end up with a situation where I have empty category heading which I want to remove via css (but other suggestions are welcome)</p>