CSS :not() vs. jQuery :not() – not the same

Ernest Marcinko jQuery, Tutorials 2 Comments

Most of you might already have heard of pseudo classes in CSS, might as well about the :not() negation pseudo class as well. It does what it sounds like it does, selects an element, which is not represented by it's argument. It's important to notice that it can only take a simple selector.

Keep in mind, that there might be better and shorter solutions to most of these examples below. This is a demonstration of possibilities, far from the optimal solutions.

A simple CSS example

Let's have 5 paragraphs, each one marked with a class .first, .second, etc…

<p class='first dude'>First Paragraph<p>
<p class='second wheres'>Second Paragraph</p>
<p class='third my'>Third Paragraph</p>
<p class='fourth car'>Fourth Paragraph</p>
<p class='fifth huh'>Fifth Paragraph</p>

To select any paragraph besides the first, we can construct the following rule:

p:not(.first) {
  /* Do what you gotta do here */
}

Here, let us color every paragraph red, that is not the .first:

See the Pen rlbKh by Ernest Marcinko (@wpdreams) on CodePen.

Combining selectors within :not() in CSS

Now let's try to select everything besides the first and the fourth paragraph. As someone trained in jQuery, I would do the following:

p:not(.first, .fourth) {
  /* Nah, this is not going to work.. */
}

Yet, this is not going to work, as it was stated before, the :not() pseudo selector only accepts a simple selector. However there is a very simple workaround:

/* Select paragraphs which has not the classes first or fourth */
p:not(.first):not(.fourth) {
  /* Hell yea! */
}

Let us test this:

See the Pen HCbtv by Ernest Marcinko (@wpdreams) on CodePen.

Pseudo in pseudo?

Yes. It is possible to use pseudo class selectors except the :not() selector itself.

/* Selects everything except the 3rd and the last item */
p:not(:nth-child(3)):not(:first-child) {
  color: red;
}

demonstrated:

See the Pen EgfDc by Ernest Marcinko (@wpdreams) on CodePen.

jQuery and :not()

The fundamental differences between how jQuery and CSS3 handles the :not() selectors are:

  • Use of comma separated selector list:
    $('p:not(.first, .second)')
  • Use of compound selectors:
    $('p:not(.first.second.third)')
  • Use of combinators:
    $('p:not(p+p)')

Thus jQuery gives you more freedom in terms of selecting elements using the :not() pseudo class, but it can become very confusing at the same time. The  examples below will work with jQuery but won't work in CSS.

See the Pen txnlv by Ernest Marcinko (@wpdreams) on CodePen.

If you take a closer look at the examples above, you will notice that the logic is unnecessary complex.

I suggest to stick with the regular CSS usage of the :not() pseudo class. I believe there are only a very few cases where one can't avoid the usage of it. jQuery gives the comfort to use more complex selections with the :not() pseudo class, yet it's overuse might indicate a call for re-factoring your application – at least that's my experience.

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Stay connected

Related Posts
Filter by
Post Page
Tutorials jQuery Blog Wordpress Hosting Testing Commercial Plugins Wordpress
Sort by

Item Transition Inspiration with jQuery

2014-03-21 19:26:44
admin

18

jQuery element rotation plugin

In my previous project I needed to rotate some elements, but I hadn't found any jQuery plugins regarding this issue.
2012-10-16 18:50:00
admin

18

Saving space automatically – Beginners guide to Digital Ocean

After a while, you will notice an exponential growth of used space, without even copying anything to it. How
2016-05-06 09:24:05
admin

8

From XAMPP to Vagrant WordPress

2016-01-05 19:58:17
admin

8

Comments 2

  1. Nick

    Not a bad article but if you are doing shit like `p:not(:nth-child(3)):not(:first-child)` your CSS is too complicated.

    You should never be styling something with jQuery because you can’t do it in CSS IMHO.

    1. Post
      Author
      Ernest Marcinko

      Of course, that’s why I added in the beginning, that these examples are only demonstrations of capabilities, not optimal solutions.

      The article wasn’t about styling anything, it was only showing the difference between the standard CSS3 and the jQuery :not() pseudo-class, and how the jQuery version might be a bit overkill in terms of possibilities.

Leave a Reply

Your email address will not be published. Required fields are marked *