Every once in a while you come across a CSS pseudo-class or pseudo-selector that fulfills a need you didn’t even know that you had. CSS’s :not is one of those pseudo-classes that when used sparingly is extremely powerful. The :not pseudo-class allows us to choose what classes, ids, or elements we want to exclude from a particular style declaration. This can be helpful when you are trying to avoid writing extra CSS by overwriting a style with low specificity. Let’s take this example below,
See the Pen CSS :not by Ben Weiser (@benweiser) on CodePen.0
Here we are using the :not pseudo-selector to style all links that do not link to google.com a specific way. While this might not be the most practical example you might definitely come across use cases where you’ll find the :not pseudo-selector useful.
Keep in mind if you’re still supporting IE8 (Why???????) using this pseudo-selector is off the table. Find any creative uses of :not? I’d love to hear it in the comments below.