advanced css: target last adjacent sibling - css

Question

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: http://plnkr.co/edit/JBsMUg2yl1JkbK6j8Bfj?p=preview
<section>
<div class="c">Category 1</div>
<div class="c">Category 2</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 3</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 4</div>
<div class="c">Category 5</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="p">product</div>
<div class="c">Category 6</div>
<div class="c">Category 7</div>
<div class="c">Category 8</div>
<div class="p">product</div>
<div class="c">Category 9</div>
</section>
My best efforts still left me with this missing: Category 3 SHOULD be selected; Category 7 should NOT be selected.
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;
}
I cannot easily change my html, nor put a class on the last adjacent sibling.
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)

Answer 1

The solution shown here: http://plnkr.co/edit/6DUHUEHC9j5mONGG1z0N?p=preview will work as far as creating the visual effect I need.
It uses separate <ul> for each category and :only-child pseudo selector.
However, it is actually not an acceptable answer to the question because it required changing the html which was undesirable. I think there should still be a solution for a flat list of elements using some combination of nth child / last child / not(), etc. but haven't found it yet.

Answer 2

I changed the HTML code and used the title-Attribute as well as the CSS visibility property. Thats the only solution I can imagine right now.
.c {
visibility: hidden;
}
.c ul {
visibility: visible;
}
.c ul:before {
content: attr(title);
}
<ul>
<li class="c">
Category 1
</li>
<li class="c">
Category 2
<ul title="Category 2">
<li class="p">product</li>
<li class="p">product</li>
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 3
<ul title="Category 3">
<li class="p">product</li>
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 4
</li>
<li class="c">
Category 5
<ul title="Category 5">
<li class="p">product</li>
<li class="p">product</li>
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 6
</li>
<li class="c">
Category 7
</li>
<li class="c">
Category 8
<ul title="Category 8">
<li class="p">product</li>
</ul>
</li>
<li class="c">
Category 9
</li>
</ul>