Grow your CSS skills. Land your dream job.


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:

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

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.


  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.

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

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

    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.


    • 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

  4. it’s amazing, I’ve no idea how many times I am going to use it.

  5. K. Alan Bates
    Permalink to comment#

    Regarding class selectors being valid “simple selectors” for a not…
    are regex class selectors considered “simple”?

    Can I create a selector (with whatever particular, correct syntax) like so…

    [class *= "foo"] not([class *= "bar"]){
       /*This element is guaranteed to be foo and guaranteed to not be bar */
       content: "Do stuff";

    Note that I’m asking because this specified rule is not working (fails SASS 3.3 compilation)

    With as hard as css has always sucked at specifying a (pretty basic) rules engine, I’m thinking not…but considered it worth the shot to ask.

  6. .foo:not([class*=bar]){}; can be used/ful too!

  7. James Holby
    Permalink to comment#

    Just wanted to point out that :not can indeed be chained per the spec:



Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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