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

Depending on what CSS properties you intend to apply, you may or may not be able to do this. If you're going to apply something like color for example, you can simply set it to all code elements and reset it in code a, assuming all the text is contained within that a and not spilled outside of it within the code. This will only work for a handful of properties, however (mostly the font ones).

Otherwise, there's not much in the way of pure CSS here, if you're trying to select code elements that don't contain a children. jQuery has code:not(:has(> a)) (or, for any arbitrary E element with no child elements at all, E:not(:has(> *))), but that's not coming to CSS anytime soon, and Selectors 4 doesn't provide anything else for "an element with no child elements".

"Feh!" is right.

Answer 2

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.