:not

  • Raccourci de la révision : CSS/:not
  • Titre de la révision : :not
  • ID de la révision : 316717
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire Update title hierarchy

Contenu de la révision

{{ CSSRef() }}

Résumé

La pseudo-classe de négation :not(x) permet de prendre un sélecteur comme argument. Elle sert à exclure des sélecteurs, des balises ou des pseudo-classes (sauf elle-même) et les arguments exclus ne seront pas concernés par les propriétés CSS que l'on met en place.

Syntaxe

:not(sélecteur) { propriétés CSS }

Exemple

Le CSS ...

p:not(.classy) { color: red; } /* Contient tous les paragraphes (p) sauf ceux avec le sélecteur de class "classy" */
:not(p) { color: green; } /* Les balises p sont exclues*/

... avec le HTML suivant ...

<p>Un peu de texte.</p>
<p class="classy">Encore du texte.</p>
<span>Et toujours du texte<span>

... doit donner ça :

Un peu de texte.

Encore du texte.

Et toujours du texte

Compatibilité des navigateurs

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
1.0 1.0 (1.2) 9.0 9.5 1.0 (85)

Spécifications

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La pseudo-classe de négation <code>:not(x)</code> permet de prendre un sélecteur comme argument. Elle sert à exclure des sélecteurs, des balises ou des pseudo-classes (sauf elle-même) et les arguments exclus ne seront pas concernés par les propriétés CSS que l'on met en place.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre>
:not(sélecteur) { propriétés CSS }
</pre>
<h2 id="Exemple">Exemple</h2>
<p>Le CSS ...</p>
<pre>
p:not(.classy) { color: red; } /* Contient tous les paragraphes (p) sauf ceux avec le sélecteur de class "classy" */
:not(p) { color: green; } /* Les balises p sont exclues*/
</pre>
<p>... avec le HTML suivant ...</p>
<pre>
&lt;p&gt;Un peu de texte.&lt;/p&gt;
&lt;p class="classy"&gt;Encore du texte.&lt;/p&gt;
&lt;span&gt;Et toujours du texte&lt;span&gt;
</pre>
<p>... doit donner ça :</p>
<p style="color: red;">Un peu de texte.</p>
<p>Encore du texte.</p>
<p style="color: green;">Et toujours du texte</p>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>1.0</td>
        <td>1.0 (1.2)</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<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 #negation</a></li>
</ul>
Revenir à cette révision