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

i want select bonkers in html fragment below. distinction it's alone in <code> block whereas siblings contain <a>'s. :empty obvious choice, won't work due text node. thought knew stuff 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 pure css solution (js isn't option), , have no control on source html.

feh!

you can follow approach. style code elements whatever css want , reset css styles 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 inheritable css*/     font-weight: normal; /*reset inheritable css*/ } 

you might not need reset styles because not styles inherited anchor code element

this 1 solution can consider.