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

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>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></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>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></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><span>google</span></li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
CSS:
div#leftcolumn ul a:hover > span {
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Updated JSFiddle

Answer 3

add .non-img to li which is without img
n do css with using .non-img
div#leftcolumn ul li.non-img a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
<div id="leftcolumn">
<ul>
<li class="non-img">google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>