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

Question

I want to select BONKERS in the HTML snippet below. Its difference is that it is alone in the <code> block, while all of its siblings contain <a> . :empty is an obvious choice, but will not work due to node text. I thought I knew this, but it makes 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 clean CSS solution (JS is not an option) and have no control over the original HTML.

Feh!

Answer 1

You can follow this approach. Create code elements with any CSS, and then reset with CSS styles that inherit from anchor ie styles:

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 may not need to reset all styles, because not all styles are inherited from the anchor code element

This is one solution you can really consider.

Answer 2

Depending on which CSS properties you are going to apply, you may or may not be able to do this. If you are going to apply something like color , for example, you can just set it for all code and reset elements in code a , assuming that all the text is contained in this a and does not spill outside of it within code . This will only work for a few properties, but (mainly for fonts).

Otherwise, there is no particular way to pure CSS if you are trying to select code elements that do not contain children a . jQuery has code:not(:has(> a)) (or for any arbitrary element E without any children at all, E:not(:has(> *)) ), but which does not come in CSS any time soon and Selectors 4 does not provide anything for an "element without children".

"Feh!" is correct.