CSS Selector for No-Children-But-Not-Empty

Question

I want to select BONKERS in the HTML fragment below. Its distinction is that it's alone in a <code> block whereas all its siblings contain <a>'s. :empty is the obvious choice, but won't work due to the text node. I thought I knew this stuff but this is driving me, well, bonkers.

 <ul class="Reference">
    <li class="level4">
        <code class="active-voice">
            <a href="some/url/x" version="2">
                mauve 
            </a>
    </code>
    <li class="level8">
        <code class="active-voice">
            BONKERS 
        </code>
    </li>
    <li class="level9 subclass">
        <code class="active-voice">
            <a href="some/url/c" version="2">
                cerise 
            </a>
    </code>
    </li>
</ul>

I need a pure CSS solution (JS isn't an option), and have no control over the source HTML.

Feh!

Answer 1

You can follow this approach. Style the code elements by whatever CSS you want and then reset those CSS styles which are inheritable in anchor's styles i.e.:

Demo: http://jsfiddle.net/GCu2D/1062/

CSS:

code {
    color: green;
    font-weight: bold;
}
code a{
    color: red;/*Reset any inheritable css*/
    font-weight: normal; /*Reset any inheritable css*/
}

You might not need to reset all styles because not all styles are inherited by anchor from the code element

This is one solution which you can really consider.