Puis-je écrire un sélecteur CSS de la sélection d'éléments PAS d'avoir une certaine classe?

Je voudrais écrire un sélecteur CSS règle qui sélectionne tous les éléments qui ne pas ont une certaine classe. Par exemple, le code HTML suivant:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

Je voudrais écrire un sélecteur qui permet de sélectionner tous les éléments qui n'ont pas la "imprimable" de la classe qui, dans ce cas, sont les nav et un éléments.

Est-ce possible?

REMARQUE: dans le code HTML réel où je voudrais l'utiliser, il va être beaucoup plus d'éléments que ne pas ont la "imprimable" de la classe de le faire (je me rends compte que c'est l'inverse dans l'exemple ci-dessus).

InformationsquelleAutor David Nordvall | 2012-02-02

796

Généralement vous ajouter un sélecteur de classe à la :not() pseudo-classe comme ceci:
```
:not(.printable) {
    /* Styles */
}
```
Mais si vous avez besoin d'une meilleure prise en charge du navigateur (IE8 et plus anciens ne prennent pas en charge :not()), vous êtes probablement mieux de créer des règles de style pour les éléments qui ne ont la "imprimable" de la classe. Si même cela n'est pas possible, malgré ce que vous dites à propos de votre majoration réelle, vous pourriez avoir à travailler votre balisage autour de cette limitation.

Gardez à l'esprit que, selon les propriétés de la configuration de cette règle, certains d'entre eux peuvent être héritées par les descendants que sont .printable, ou autrement affecter d'une manière ou d'une autre. Par exemple, bien que display n'est pas héréditaire, réglage display: none sur un :not(.printable) l'empêcher et tous ses descendants à partir de l'affichage, puisqu'elle supprime l'élément et sa sous-arborescence de la mise en page complètement. Bien souvent, vous pouvez contourner ce problème en utilisant visibility: hidden à la place qui permettra visible descendants de spectacle, mais les éléments cachés affecte toujours mise en page que ce qu'ils avaient fait. En bref, il suffit de faire attention.
- Comme une petite pépite de l'info, prise en charge du navigateur de média indépendant aspects de la CSS est souvent le même sur tous types de supports — si un navigateur ne supporte pas :not() sur l'écran, il ne le supportent pas en imprimer.
- Notez que :not() ne prend que simple sélecteur qui signifie ne peut pas contiennent imbriqués les sélecteurs comme :not(div .printable) - voir W3C Sélecteur de syntaxe
- Je l'ai juste essayé pour .active :non(.actif a) n'a pas de travail pour moi. Mais, un:not(.active) l'a fait!
- Lorsque vous dites qu'il ne fonctionne pas pour vous, vous avez sans doute dire qu'il ne fonctionne pas pour vous, droit? Cela ne signifie pas qu'il ne fonctionne pas, c'est probablement le cas de la spécificité -- les propriétés dans votre :not(.active) règle peut avoir simplement été remplacée par les propriétés de la règle(s) de priorité supérieure.
- Notez que :not a moins spécifique que d'un sélecteur de classe. Cela signifie que toutes les classes et les sélecteurs d'id de la remplacer. Si vous avez des règles div:not(.a) et div.b et un élément HTML <div class="b"> Il va suivre le div.b sélecteur, même si c'est avant la div:not(.a) sélecteur.
- href="https://jsfiddle.net/BoltClock/57exLm1j" >Êtes-vous sûr de cela? La spécificité de :not() est que de son argumentation, ce qui signifie :not(div) est également spécifique à div, :not(.cls) à .cls et :not(#id) à #id.
- oh, mon erreur. Je viens de lire la simple spécificité doc et supposé :not serait se comporter comme tous les autres du côlon sélecteurs.
InformationsquelleAutor BoltClock

153

:not([class])

En fait, cela permet de sélectionner tout ce qui n'est pas une classe css (class="css-selector") sont appliqués.

J'ai fait un jsfiddle démo

CSS:

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}

HTML:

    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

Est-ce pris en charge? Oui : Caniuse.com (consulté le 25 Août 2014):

Support: 88.85%
Une prise en charge partielle: 4.36%
Total:93.21%

Drôle modifier, j'ai été Googler le contraire de :pas. CSS négation?

selector[class]  /* the oposite of :not[]*/

InformationsquelleAutor Milche Patern

99

La :non négation pseudo classe

La négation CSS pseudo-classe, :not(X), est une fonctionnelle de la notation
prenant un simple sélecteur de X comme argument. Il correspond à un élément qui
n'est pas représenté par l'argument. X ne doit pas contenir un autre
la négation du sélecteur.

Vous pouvez utiliser :not à exclure tout sous-ensemble d'éléments qui correspondent, ordonné, comme vous le feriez normal sélecteurs CSS.

Exemple Simple: à l'exclusion de la classe

div:not(.class)

Sélectionnez tous les div éléments sans la classe .class

CSS:
```
div:not(.class) {
  color: red;
}
```
HTML:
```
<div>Make me red!</div>
<div class="class">...but not me...</div>
```
Exemple complexe: l'exclusion par type /hiérarchie

:not(div) > div

Sélectionnez tous les div éléments qui ne sont pas les enfants d'un autre div

CSS:
```
div {
  color: black
}
:not(div) > div {
  color: red;
}
```
HTML:
```
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
```
Exemple complexe: le chaînage de pseudo-sélecteurs

À l'exception notable de ne pas être capable de la chaîne d'/nid :not les sélecteurs et les pseudo-éléments, vous pouvez utiliser en conjonction avec d'autres pseudo-sélecteurs.

CSS:
```
div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
```
HTML:
```
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
```
Prise En Charge Du Navigateur, etc.

:not est un CSS3 sélecteur de niveau, la principale exception en termes de soutien, c'est qu'il est IE9+

La spec est également un point intéressant:

la :not() pseudo permet inutiles sélecteurs d'être écrit. Pour
exemple :not(*|*), ce qui représente aucun élément, ou
foo:not(bar), ce qui est équivalent à foo mais avec une augmentation de
spécificité.
- C'était un souper bien documenté et bien exemplifié réponse! #thumbsup
- Ok, votre exemple :not(div) > div serait de travailler uniquement avec des parents directs. Quels sont les autres grands-pères?
- J'avais besoin de couleur code éléments aussi longtemps qu'ils n'étaient pas à l'intérieur d'un pre élément. Que :not(div) > div extrait était exactement ce dont j'avais besoin, merci!
InformationsquelleAutor SW4
20

Je pense que cela devrait fonctionner:
```
:not(.printable)
```
De "négative sélecteur css" répondre.

InformationsquelleAutor Eregrith
9

Comme à contribuer à ce que les réponses ci-dessus :ne pas() peut être très efficace dans les formes angulaires, plutôt que de créer des effets ou de réglage de l'affichage/DOM,
```
input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}
```
Assure que sur le chargement de votre page, les champs de saisie ne montre que les invalides (bordures rouges ou de fond, etc), s'ils ont l'ajout de données (c'est à dire n'est plus vierge) mais ne sont pas valides.

InformationsquelleAutor BaneStar007

Exemple

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    //Write your css code here
  }

//Opacité 0.6 tous "de la section", mais pas "de la section" nom de

InformationsquelleAutor Hakan

2

Vous pouvez utiliser :not(.class) sélecteur comme mentionné avant.

Si vous vous souciez de compatibilité d'Internet explorer, je vous recommande d'utiliser http://selectivizr.com/.

Mais n'oubliez pas de passer sous apache sinon vous ne verrez pas l'effet.
- Qu'entendez-vous l'exécuter sous apache? Selectivizr est un front-end lib, il n'a rien à voir avec le logiciel serveur
- Il effectue une requête ajax - ce qui ne veut pas travailler sans un serveur http.
- Ce n'est pas spécifique à apache, il y a d'autres serveur techs...
InformationsquelleAutor MelkorNemesis

À l'aide de la `:not()` pseudo classe:

Pour la sélection de tout, mais un certain élément (ou les éléments). Nous pouvons utiliser la :not() CSS pseudo classe. Le :not() pseudo classe nécessite un CSS sélecteur comme argument. Le sélecteur d'appliquer les styles pour tous les éléments sauf pour les éléments qui sont définis comme un argument.

Exemples:

CSS:

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}

HTML:

<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Nous pouvons déjà voir la puissance de cette pseudo classe, il nous permet de facilement régler nos sélecteurs par l'exclusion de certains éléments. En outre, cette pseudo classe augmente la spécificité de la sélection. Par exemple:

CSS:

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}

HTML:

<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

InformationsquelleAutor Willem van der Veen

-1

Comme les autres ont dit, il vous suffit de mettre :not(.de classe). Pour les sélecteurs CSS, je vous recommande de visiter ce lien, il a été très utile tout au long de mon voyage:
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
```
div:not(.success) {
  color: red;
}
```
La négation de la pseudo classe est particulièrement utile. Disons que je veux sélectionner tous les divs, à l'exception de celui qui a un id de conteneur. L'extrait de code ci-dessus va gérer cette tâche à la perfection.

Ou, si je le voulais pour sélectionner chaque élément (pas conseillé), sauf pour les étiquettes de paragraphe, on pourrait faire:
```
*:not(p) {
  color: green;
}
```
InformationsquelleAutor HBhering

Vous devez vous connecter pour publier un commentaire.

La :non négation pseudo classe

Exemple Simple: à l'exclusion de la classe

Exemple complexe: l'exclusion par type /hiérarchie

Exemple complexe: le chaînage de pseudo-sélecteurs

Prise En Charge Du Navigateur, etc.

À l'aide de la :not() pseudo classe:

Exemples:

La `:non` négation pseudo classe

À l'aide de la `:not()` pseudo classe: