CSS general sibling combinator (~) not working with negation pseudo-class (:not)

Question

I have a contact list that is generated as an unordered list with HTML5 data attributes assigned to each list item. The values of the data attributes are single letters for alphabetizing purposes. I have no control over the markup that is generated, but I need to insert a section title before the first entry for each letter. This I hope to achieve with the :before pseudo-element. Nothing out of the ordinary. I have a lot of freedom with the CSS selectors I choose, because this project only supports IE9+.

Example markup:

<ul>
    <li data-name="a"> ... </li>
    <li data-name="a"> ... </li>
    <li data-name="a"> ... </li>

    <li data-name="z"> ... </li>
    <li data-name="z"> ... </li>
    <li data-name="z"> ... </li>
</ul>

Example CSS:

li:not([data-name="a"] ~ [data-name="a"]):before { ... }

Unfortunately this selector does not work and I am not entirely sure why not, because if I break it into sections, everything is just dandy.

The general sibling combinator works fine on its own, as does the negation pseudo-class, it's just when they're combined that nothing happens.

This also does not work:

li:not(li[data-name="a"] ~ li[data-name="a"]):before { ... }

Answer 1

When all else fails, RTFM. I found the answer to my question in the W3 selector specification:

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

and

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

In other words, it doesn't work because it shouldn't work. The general sibling combinator is not a simple selector, so it cannot be used with the negation pseudo-class.

Links:

1. http://www.w3.org/TR/css3-selectors/#negation
2. http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn