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

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:

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

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:

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

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:

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

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.

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

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: [javascript]$(‘p:not(.first, .second)’)[/javascript]
• Use of compound selectors: [javascript]$(‘p:not(.first.second.third)’)[/javascript]
• Use of combinators: [javascript]$(‘p:not(p+p)’)[/javascript]

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.