select element that does not contain a string within an attribute

Question

let's say that I have some

<TR style = "background-color : red ;">

and some

<TR>

(to be noted that the spaces next to the colon and to the semicolon are intentional, because the page I am dealing with is written in that way)

now, this:

$('.detailtable tr:not([style~="darkgray"])')

works perfectly. But here it says:

[name!="value"] cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").not('[name="value"]') instead

so I was wondering: is my expression the best one or something like:

$('.detailtable tr').not('[style~="darkgray"]') // this doesn't work!

is better performing? And what is the correct way of writing this last expression?

Thanks in advance

Answer 1

If you really want to "select element that does not contain a string within an attribute", you should use *= instead of ~=, like so:

$('.detailtable tr').not('[style*="darkgray"]');

Here's the fiddle.

---

And no, using .not is probably not faster. querySelectorAll should be able to parse that selector as is.

See this fiddle.

---

Edit: If you care about IE8 that much, then using the .not method instead of the :not selector will give you a small performance boost. The reason for this is very simple: IE8 does support attribute selectors, but not the negation selector.