:not()

  • Revision slug: CSS/:not
  • Revision title: :not()
  • Revision id: 388429
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The CSS negation 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.

Syntax

:not(selector) { style properties }

Examples

Usage Example

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

...where...

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

...should look like...

Some text.

Some other text.

One more text

Specifications

Specification Status Comment
{{ SpecName('CSS4 Selectors', '#negation', ':not()') }} {{ Spec2('CSS4 Selectors') }} Extends its argument to allow some non-simple selectors.
{{ SpecName('CSS3 Selectors', '#negation', ':not()') }} {{ Spec2('CSS3 Selectors') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 9.0 9.5 3.2
Extended arguments {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo{{CompatNo}}}}  
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("1") }} 9.0 10.0 3.2
Extended arguments {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

 

Revision Source

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong>CSS negation <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a></strong>, <code>:not(X)</code>, is a functional notation taking a simple selector <var>X</var> as an argument. It matches an element that is not represented by the argument. <var>X</var> must not contain another negation selector, or any <a href="/en-US/docs/CSS/Pseudo-elements" title="Pseudo-elements">pseudo-elements</a>.</p>
<p>The <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> of the <code>:not</code> pseudo-class is the specificity of its argument. The <code>:not</code> pseudo-class does not add to the selector specificity, unlike other pseudo-classes.</p>
<div class="note">
  <strong>Notes:</strong>
  <ul>
    <li class="note">Useless selectors can be written using this pseudo-class. E.g. <code>:not(*)</code> matching any element which is not any element will never be applied.</li>
    <li class="note">It is possible to rewrite other rules. E.g. <code>foo:not(bar)</code>will match the same element as the simple <code>foo</code>. Nevertheless the <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a> of the first one is higher.</li>
  </ul>
</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
:not(selector) { <em>style properties</em> }</pre>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Usage_Example" name="Usage_Example">Usage Example</h3>
<pre class="brush: css">
p:not(.classy) { color: red; }
:not(p) { color: green; }</pre>
<p>...where...</p>
<pre class="brush: html">
&lt;p&gt;Some text.&lt;/p&gt;
&lt;p class="classy"&gt;Some other text.&lt;/p&gt;
&lt;span&gt;One more text&lt;span&gt;
</pre>
<p>...should look like...</p>
<p style="color: red;">Some text.</p>
<p>Some other text.</p>
<p style="color: green;">One more text</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>Extends its argument to allow some non-simple selectors.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>3.2</td>
      </tr>
      <tr>
        <td>Extended arguments</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo{{CompatNo}}}}</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.1</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>9.0</td>
        <td>10.0</td>
        <td>3.2</td>
      </tr>
      <tr>
        <td>Extended arguments</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
Revert to this revision