Puis-je écrire un sélecteur CSS sélectionnant des éléments N'ayant pas une certaine classe?

:not([class])

en fait, cela va sélectionner Tout ce qui n'a pas une classe css ( class="css-selector" ) appliquée à elle.

j'ai fait un jsfiddle démo

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

    <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%
• Soutien partiel: 4,36%
• Total: 93.21%

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

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

Le :not négation de la pseudo classe

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

vous pouvez utiliser :not pour exclure tout sous-ensemble d'éléments appariés, classés comme vous le feriez normalement. Les sélecteurs CSS.

---

exemple Simple: exclusion par classe

div:not(.class)

sélectionnerait tous les div éléments sans la classe .class

div:not(.class) {
  color: red;
}

<div>Make me red!</div>
<div class="class">...but not me...</div>

---

exemple complexe: exclusion par type /hiérarchie

:not(div) > div

Would sélectionnez tous les éléments div qui ne sont pas des enfants d'un autre div 1519270920"

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

---

exemple complexe: chaînage de pseudo-sélecteurs

à l'exception notable de ne pas pouvoir enchaîner/emboîter :not sélecteurs et pseudo-éléments, vous pouvez utiliser en conjonction avec d'autres pseudo-sélecteurs.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<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+

le spec fait également un point intéressant:

le pseudo :not() permet aux sélecteurs inutiles d'être écrire. Pour exemple :not(*|*) , qui représente aucun élément, ou foo:not(bar) , qui est l'équivalent de foo mais avec un plus haut spécificité.

je pense que cela devrait fonctionner:

:not(.printable)

à Partir de "négatif sélecteur css" réponse .

tout comme contribuer que les réponses ci-dessus de: pas() peut être très efficace dans les formes angulaires, plutôt que de créer des effets ou d'ajuster la vue / DOM,

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

garantit que lors du chargement de votre page, les champs d'entrée ne montreront les Invalides (bordures rouges ou arrière-plans, etc.) que s'ils ont des données ajoutées (c'est-à-dire qu'ils ne sont plus vierges) mais invalides.

exemple

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

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

vous pouvez utiliser le sélecteur :not(.class) comme mentionné ci-dessus.

si vous vous souciez de la compatibilité avec 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.

utilisant la pseudo classe :not() :

pour sélectionner tout sauf un élément (ou des éléments) déterminé (s). Nous pouvons utiliser la :not() CSS pseudo class . La classe pseudo :not() nécessite un sélecteur CSS comme argument. Le sélecteur appliquera les styles à tous les éléments à l'exception des éléments spécifiés comme argument.

exemples:

/* 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;
}

<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, elle nous permet d'affiner commodément nos sélecteurs en excluant certains éléments. De plus, cette pseudo-classe augmente la spécificité du sélecteur . Par exemple:

/* 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;
}

<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>

comme d'autres ont dit, vous avez simplement mis :pas(.classe.) Pour les sélecteurs CSS, je 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

20. X:non(sélecteur)

    1. div:non (#container) {
    2. couleur: Bleu;
    3. }

la pseudo classe de négation est particulièrement utile. Disons que je veux sélectionner toutes les divs, sauf celle qui a un ID de conteneur. Le morceau ci-dessus va gérer cette tâche parfaitement.

ou, si je voulais sélectionner chaque élément (non conseillé) à l'exception des balises de paragraphe, nous pourrions faire:

1. *:not(p) {
2. color: green;
3. }