jQuery to select where no children or first child is not image

Question

I'm trying to dynamically style some elements on my pages. So, if I had the following code:

<a href="#">
  Select Me
</a>

<a href="#">
  <img src="blah.jpg" />
  Don't select me
</a>

<a href="#">
 <div>Don't select me either</div>
 <img src="blah.jpg" />
</a>

<a href="#">
  <div>You can select me too.</div>
</a>

I would like it to select the first and fourth tags.

From what I could tell, by using:

 $("a:first-child")

Won't select the first tag because it doesn't have any children (just text). The second tag should not get selected so something like:

$("a:first-child").not("img)

but that leaves out the first item.

EDIT: If there is an IMG anywhere in the A element, don't select it.

Answer 1

do you wanna select the first anchor?

$("a:first")

Answer 2

Assuming I've understood your question properly,

$("a:not(:has(img))");

http://api.jquery.com/not-selector/
http://api.jquery.com/has-selector/

---

After your comments below, the selector I wrote originally should work for you.

Answer 3

If you want to select all links which don't have an image as the first child, use this:

$('a:not(:has(> img:first-child))')

If you want to select all links which don't have an image at all, use this:

$('a:not(:has(img))')

Answer 4

I have not tried it, but you should write something like this:

$("a").filter(function() {
    return $(this).filter("> img:first-child").length != 0;
})

It will first select all the a's and then filter the ones that have an img as first child.

UPDATE:
nickf solution is definitely clearer :-)
I often forget how versatile the jquery selector is.