2

Having spent the last 3 years gradually improving my javascript, I am now learning the jQuery shorthand equivalents.

I have long been aware that jQuery's clever selectors can now be achieved in native Javascript using:

  • document.querySelector();
  • document.querySelectorAll();

However, in solving a recent problem, I used the following selector in jQuery:

$('div div[class!="class4"]')

When I tried to duplicate in Javascript what I'd successfully achieved in jQuery, I used the same selector:

document.querySelectorAll('div div[class!="class4"]')

But it didn't work!

Then I checked several authoritative CSS sources for the [attribute != "value"] and I couldn't find mention of it anywhere.

I am happy to use

document.querySelectorAll('div div:not(.class4)')

in Javascript instead.

But... what about [attribute != "value"] ?

Have I made it up?

And if so, why does it work in jQuery?

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 3
    [Is there a CSS not equals selector?](//stackoverflow.com/q/3353968). [jQuery Docs](https://api.jquery.com/attribute-not-equal-selector/) – Tushar Dec 07 '16 at 11:50
  • 1
    "!=" is jquery ":not()" is css. – Lain Dec 07 '16 at 11:51
  • 1
    I think the dupe answers your question. – Tushar Dec 07 '16 at 11:52
  • 1
    @Rounin, you can combine the `:not` with the exact-attribute selector: `div.a:not([rel="b"])` This will select all divs that has the `a` class where their rel attribute != "b". I voted for the question to reopen because I think it's not an exact dup of the other one. – Dekel Dec 07 '16 at 11:56
  • 1
    So to that question - there is no specific `attribute != value` selector in css :) – Dekel Dec 07 '16 at 11:59
  • 1
    There are a number of jQuery inventions that you'll be in for a rude surprise to find out don't exist in CSS. Even :not() suffers from this http://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css – BoltClock Dec 07 '16 at 14:13
  • Thanks for that addition, @BoltClock. As soon as I saw the jQuery `div:not(.alpha, .beta, .gamma)` in that question, I thought: _"Wouldn't that be:_ `div:not(.alpha):not(.beta):not(.gamma)` _in CSS?"_ I'd argue that the jQuery syntax makes more sense though... if you're unfamilar with how CSS reads it, the non-spaced chaining of multiple `:nots` might suggest a logical AND operator rather than a logical OR operator. – Rounin Dec 07 '16 at 14:26

1 Answers1

3

"!=" is jquery ":not()" is css.

But... what about [attribute != "value"] ?

jquery('[attribute != "value"]')

The jquery part can be modified with the css selector :not().

document.querySelector(':not([attribute="value"])')

More information about the jquery extension "!=" can be found in the documentaries: https://api.jquery.com/attribute-not-equal-selector/

Because [name!="value"] is a jQuery extension and not part of the CSS specification, queries using [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.

Lain
  • 3,657
  • 1
  • 20
  • 27
  • @worldofjr: Thank you, I will keep those formatting issues in mind. – Lain Dec 07 '16 at 12:00
  • Incidentally, I think this answers something else for me too: when might be a good situation to use `:not()`. For a couple of years I have avoided using `:not()` because it has always struck me as quite awkward and inelegant. But I can see now that `:not([class="not-me"])`, `:not([class^="not-"])` and `:not([class$="-me"])` are the real-world versions of the (theoretical) `([class!="not-me"])`, `([class!^="not-"])` and `([class!$="-me"])`. – Rounin Dec 07 '16 at 12:12
  • 1
    Well, that comes more down to personal preference and habits. It is like using "not a is null" or "a isnot null" in various languages. By scripting in javascript and jquery people kinda know and expect to see "!=" and thus it is less confusing I assume. Then again people rather use (a != b) than !(a==b). – Lain Dec 07 '16 at 12:19