1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: ':not'
slug: 'Web/CSS/:not'
tags:
- CSS
- Pseudo-classe
- Reference
translation_of: 'Web/CSS/:not'
---
<div>{{CSSRef}}</div>
<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> de négation, <strong><code>:not()</code></strong>, est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.</p>
<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel élément qui n'est */
/* pas un paragraphe */
:not(p) {
color: blue;
}</pre>
<p>La <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p>
<div class="note">
<p><strong>Notes :</strong></p>
<ul>
<li>Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, <code>:not(*) </code>va exclure tous les éléments et ne sera jamais appliqué.</li>
<li>À l'inverse, il est possible d'augmenter la <a href="/fr/docs/Web/CSS/Spécificité">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li>
<li><code>:not(toto){}</code> ciblera tout élément qui n'est pas <code>toto</code>, <strong>notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}</strong>.</li>
<li>Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, <code>body :not(table) a</code> s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie <code>:not()</code> du sélecteur.</li>
</ul>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-éléments">de pseudo-élément</a>.</p>
<div class="warning">
<p><strong>Attention</strong>, la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p>
</div>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">/* Contient tous les paragraphes (p) sauf
ceux avec le sélecteur de class "classy" */
p:not(.classy) {
color: red;
}
/* Les balises p sont exclues */
/* Attention, il est nécessaire d'avoir un */
/* combinateur. On ne peut pas écrire ':not(p)' */
*:not(p) {
color: green;
}
/* Les éléments qui ne sont pas des paragraphes */
/* et qui n'ont pas la classe "classy" */
/* Note : cette syntaxe n'est pas bien supportée */
body :not(.classy, p) {
font-family: sans-serif;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>
Un peu de texte.
</p>
<p class="classy">
Encore du texte.
</p>
<span>
Et toujours du texte.
<span>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.selectors.not")}}</p>
|
