CSS Selector Level 4 » Negation pseudo-class

This pseudo-class is called negation pseudo-class which takes a simple selector list as an argument (combination selectors aren't allowed). It matches the elements which are not represented by the passed arguments. Negations may not be nested within itself like this invalid example: E:not(:not(F))

# Syntax

Copy
:not(negation-selector1[, negation-selector2,]) {
    /* declarations */
}

# Example

Copy
a:not([rel="external"], [rel="nofollow"]) {
    color: red;
}

In this example all links are going to be selected which have no rel attribute with the attribute value external or nofollow. So you could style external or nofollow (marked) links different than regular ones.

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (88) Yes (84) Yes (10.1) Yes (88) No Yes (74)
Mobile Yes (88) Yes (84) Yes (9.3) No No No

# Usage statistics (Alexa Top 1,250,000 sites)

Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera info external