Select every element that is not inside another element

Question

<img src="xxx" alt="xxx" title="xxx">
<div class="buttons">
    <a href="xxx"><img src="xxx" alt="xxx" title="xxx"></a>
</div>

I need to write a jQuery selector, that will select ONLY images with title attributes that are OUTSIDE the .buttons div. I know that to select images with title attributes I need to use something like this:

$("img[title]")

I know that there is something like :not() selector in jQuery, but I can't find the way to combine them together to achieve that exact result.

Solution

You can get the result set then filter it using .not(), like this:

$("img[title]").not(".buttons img")

Or filter in the same selector using :not() (but this is probably a bit slower in older browsers), like this:

$("img[title]:not(.buttons img)")

Comments

[jbyrd]

Is there a way to do it without repeating the original selector (' img') part? I'm trying to look for errors not inside .container-to-exclude, and the errors can be several selectors, so I have them separated by commas, like .Error, .Errors, .Warning, and I don't want to have to say $('.Error, .Errors, .Warning').not('.container-to-exclude .Error, .container-to-exclude .Errors, .container-to-exclude .Warning').

[jamp]

@jbyrd you can use ' *' instead of ' img'