Your Search Results

    :not()

    Summary

    The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

    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.

    Notes:
    • Useless selectors can be written using this pseudo-class. E.g. :not(*) matching any element which is not any element will never be applied.
    • It is possible to rewrite other rules. E.g. foo:not(bar)will match the same element as the simple foo. Nevertheless the specificity of the first one is higher.
    • :not(foo){} will match anything that isn't foo, including html and body.

    Syntax

    :not(selector) { style properties }

    Examples

    Usage Example

    p:not(.classy) { color: red; }
    body :not(p) { color: green; }

    ...where...

    <p>Some text.</p>
    <p class="classy">Some other text.</p>
    <span>One more text<span>
    

    ...should look like...

    Specifications

    Specification Status Comment
    Selectors Level 4 Working Draft Extends its argument to allow some non-simple selectors.
    Selectors Level 3 Recommendation Initial definition.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.5 3.2
    Extended arguments Not supported Not supported Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 1.0 (1) 9.0 10.0 3.2
    Extended arguments Not supported Not supported Not supported Not supported Not supported

     

    Document Tags and Contributors

    Last updated by: tregagnon,
    Hide Sidebar