CSS: apply style only on <a> without inner <img>

Question

I would like to apply style to hovered links in a list, but only if there is not image inside <a> element.

The markup is like this:

<div id="leftcolumn">
  <ul>
    <li><a href="http://google.com">google</a></li>
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
  </ul>
</div>

and my css:

div#leftcolumn ul a:hover{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
}

I have tried this css, but to no avail:

div#leftcolumn ul a:hover < img{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
}

Here is the jsfiddle

Answer 1

You cannot style an element based on it's children in CSS, what you can do is assign a special class for <a> tags that hold the image and prevent styling it:

<div id="leftcolumn">
      <ul>
        <li><a href="http://google.com">google</a></li>
        <li><a href="http://google.com" class="withImage"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
      </ul>
</div>

div#leftcolumn ul a:not(.withImage):hover{ 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
  border-top: 1px solid black; 
} 

Answer 2

I doubt this is possible in pure CSS.

However, you could wrap text in a <span> and only apply rules there, i.e. something like:

<div id="leftcolumn">
  <ul>
    <li><a href="http://google.com"><span>google</span></a></li>
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li>
  </ul>
</div>

CSS:

div#leftcolumn ul a:hover > span { 
  background-color: #F8F8F8; 
  color: Black; 
  border-bottom: 1px solid Black; 
}

Updated JSFiddle