Select all <a> tags except the <a> tags that contain an <img> tag in CSS

Question

I want to make all text links at my website have a bottom border. I use:

a
{
    border-bottom: 1px dotted #333;
}

... but it adds a border to image links too and I don't want that.

How do I make it work for text links only?

Answer 1

Add this:

img {
    border: none;
}

That will get rid of borders on images.

Answer 2

a { border-bottom:1px dotted #333; }
a img { border:0; }

Just override the inherited rule, the native css way.

Edit: Wow, I'm really not paying attention. Can you just throw a class to anchors that include images?

a.contains-image { border:0; }

This would be the only non-scripting solution without relying on CSS3's not selector.

Answer 3

Adding a border on links and removing it if it contains some img isn't possible in CSS, with or without :not()
You can't select an element depending on its descendants (CSS isn't XPath) and you can't affect parents styling.

I'd use jQuery selectors (Sizzle to be precise) and add a class depending on the presence of an image:

<style type="text/css">
  .underline { border: 4px dotted #333; }
  a img { border:0; /* remove the default blue border from images within links */}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
  $(document).ready(function() {
    $('a:not(:has(img))').addClass('underline');
  });

If you've not only 100% text and a>img:only-child links but also text+img mixed in links, you could also target img:only-child or wrap text in links (except img) in span elements to style mixed links in a certain way, if you've these edge cases in your page.