CSS: apply style only on without inner

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

Are you forced to this HTML? If not, you could wrap text in a `` and apply rules there. — Cedric Reichenbach, Jan 05 '16 at 09:07
@DarrenSweeney Pseudo selector :not() wont accept complex selector in it. — Rajaprabhu Aravindasamy, Jan 05 '16 at 09:08
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Pete, Jan 05 '16 at 09:08

score 5 · Answer 1 · answered Jan 05 '16 at 09:11

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; 
}

if you are going to put a class on the anchor, why not just put it on the one with text and target that rather than on the one with the image and targetting not that? — Pete, Jan 05 '16 at 09:12

score 2 · Accepted Answer · answered Jan 05 '16 at 09:11

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

This is Good, But if there is no Span Ho can make it Work ? – Dinesh Kanivu Jan 05 '16 at 09:25 — Dinesh Kanivu, Jan 05 '16 at 09:25

score 0 · Answer 3 · answered Jan 05 '16 at 09:14

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"><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>

CSS: apply style only on without inner

3 Answers3