mozilla

Revision 57524 of :not()

  • Revision slug: CSS/:not
  • Revision title: :not()
  • Revision id: 57524
  • Created:
  • Creator: Miken32
  • Is current revision? No
  • Comment page created, 78 words added

Revision Content

{{ CSSRef() }}

Summary

A functional selector that matches elements that do not match the given selector. The given selector must not contain another negation selector, or any pseudo-elements.

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

Revision Source

<p>{{ CSSRef() }}<strong><br>
</strong></p>
<h3 name="Summary">Summary</h3>
<p>A functional selector that matches elements that do not match the given selector. The given selector must not contain another negation selector, or any pseudo-elements.</p>
<h3 name="Syntax">Syntax</h3>
<pre>:not(selector) { <em>style properties</em> }</pre>
<h3 name="Examples">Examples</h3>
<h4>Usage Example</h4>
<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>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#negation" title="http://www.w3.org/TR/css3-selectors/#negation">CSS 3 Selectors</a></li>
</ul>
Revert to this revision