Grow your CSS skills. Land your dream job.

:not(s)

Last updated on:

The :not(X) property in CSS is a negation pseudo class and accepts a simple selector1 as an argument. Essentially, just another selector of any kind.

:not matches an element that is not represented by the argument. The passed argument may not contain additonal selectors or any pseudo-element selectors.

View Demo

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

In this example we have an unordered list with a single class on the li:

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

Our CSS would select all the <li> elements except the one(s) with a class of .different.

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

You could also do the same using pseudo classes which are considered a simple selector.

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

However if we use a pseudo element selector as our argument it will not produce the expected result.

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

Visual representation of the varied uses of :not()

The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.

Negations may not be nested so :not(:not(...)) is never permitted. Authors should also note that since pseudo elements are not considered a simple selector, they are not valid as an argument to :not(X). Be mindful when using attribute selectors as some are not widely supported as others. Chaining :not selectors with other :not selectors is permissible.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
14+ 4.0+ 3+ 11.1+ 9+ 2.1+ 3.0+

1 A simple selector is classified as a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector.

Comments

  1. mesamorpho
    Permalink to comment#

    Thanks for covering the :not() selector, and as always with useful examples!

    I would like to point out though, that the example depicted in the image of p:not(:nth-child(2n+1)) is somewhat ambiguous and may be misleading, at least without explicit reference. The example holds true when looking at your demo page, where the first child of the <div class="f"> block is a <header> element but anyone not looking at the demo page is likely going to expect that the second and fourth elements are selected/displayed with a white background — since the example selector really says: select any <p> element that is not an odd child, whereas the image shows exactly the two odd elements as being selected.

  2. razvan
    Permalink to comment#

    On the image “Visual representation of the varied uses of :not()” shouldn’t you point the 2 and 4 boxes ?
    2n+1 is an odd number.So when you say :not(odd) should result in targeting the even numbers.
    Am I wrong ?

  3. Pratip Ghosh
    Permalink to comment#

    Thanks for the wonderful article. However, I would like to know whether there is a way to identify a single element in my html page that would “not” take the general styling/css? What “not” does is specify all other element and “not” the one in the argument. I just want the opposite.

    <style>
    .div-class p{font-weight: bold;}
    .div-class p:not(.no-style){font-weight: normal;}
    </style>

    <div class="div-class">
    <p>This should be bold.</p>
    <p class="no-style">This should not be bold.</p>
    </div>

    I would like the “p” with the “no-style” class to have a normal font weight. It’s currently the opposite. I hope to have made myself clear.

    Thanks,

    • Permalink to comment#

      @Pratip: simply use straight forward css:

      p {
          font-weight: bold;
      }
      .no-style {
          font-weight: normal;
      }
      

      You don’t NOT want the paragraph with that class, but you do want the paragraph with the class no-style

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".