Puis-je écrire un sélecteur CSS en sélectionnant des éléments n’ayant pas une certaine classe?

Je voudrais écrire une règle de sélecteur CSS qui sélectionne tous les éléments qui n’ont pas une certaine classe. Par exemple, compte tenu du code HTML suivant:

  

Example

Print me!

This page is super interresting and you should print it!

Je voudrais écrire un sélecteur qui sélectionne tous les éléments qui n’ont pas la classe “imprimable” qui, dans ce cas, sont le nav et les éléments.

Est-ce possible?

NOTE: dans le HTML actuel où je voudrais utiliser ceci, il y aura beaucoup plus d’éléments qui n’ont pas la classe “imprimable” que je ne le fais (je me rends compte que c’est l’inverse dans l’exemple ci-dessus).

En règle générale, vous ajoutez un sélecteur de classe à la pseudo-classe :not() comme ceci:

 :not(.printable) { /* Styles */ } 

Mais si vous avez besoin d’une meilleure prise en charge du navigateur (IE8 et versions antérieures ne prennent pas en charge :not() ), il est probablement préférable de créer des règles de style pour les éléments possédant la classe “imprimable”. Si même ce n’est pas faisable malgré ce que vous dites à propos de votre balisage réel, vous devrez peut-être travailler votre balisage autour de cette limitation.

Gardez à l’esprit que, selon les propriétés que vous définissez dans cette règle, certaines d’entre elles peuvent être héritées par des descendants qui sont .printable ou les affecter d’une manière ou d’une autre. Par exemple, bien que display ne soit pas hérité, setting display: none on a :not(.printable) l’empêchera, ainsi que tous ses descendants, de s’afficher, car il supprime complètement l’élément et son sous-arbre. Vous pouvez souvent contourner cela en utilisant visibility: hidden au lieu de cela, ce qui permettra aux descendants visibles de s’afficher, mais les éléments cachés affecteront toujours la mise en page comme ils l’ont fait à l’origine. Bref, soyez prudent.

 :not([class]) 

En fait, cela sélectionnera tout ce qui n’a pas de classe css ( class="css-selector" ).

J’ai fait une démo de jsfiddle

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

fake-class will be green

empty class SHOULD be white

no class should be red

fake-class2 SHOULD be white

empty class2 SHOULD be white

no class2 SHOULD be red

La pseudo-classe :not negation

La pseudo-classe CSS négation,: :not(X) , est une notation fonctionnelle prenant 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 pas exclure un sous-ensemble d’éléments correspondants, comme vous le feriez avec les sélecteurs CSS normaux.


Exemple simple: exclure par classe

div:not(.class)

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

 div:not(.class) { color: red; } 
 
Make me red!
...but not me...

Je pense que cela devrait fonctionner:

 :not(.printable) 

De “sélecteur CSS négatif” répondre .

Juste comme pour consortingbuer que les réponses ci-dessus de: not () peuvent être très efficaces dans les formes angulars, plutôt que de créer des effets ou d’ajuster la vue / DOM,

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

S’assure que lors du chargement de votre page, les champs de saisie afficheront uniquement les zones invalides (bordures ou arrière-plans rouges, etc.) si des données ont été ajoutées (c.-à-d.

Exemple

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

// Opacité 0.6 tout “section-” mais pas “nom-section”

Vous pouvez utiliser :not(.class) sélecteur :not(.class) comme mentionné précédemment.

Si vous vous souciez de la compatibilité d’Internet Explorer, je vous recommande d’utiliser http://selectivizr.com/ .

Mais rappelez-vous de l’exécuter sous Apache, sinon vous ne verrez pas l’effet.

Comme d’autres l’ont dit, vous mettez simplement: not (.class). Pour les sélecteurs CSS, je vous recommande de visiter ce lien, il a été très utile tout au long de mon parcours: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

  1. X: pas (sélecteur)

    1. div: not (#container) {
    2. Couleur bleue;
    3. }

La pseudo-classe de négation est particulièrement utile. Disons que je veux sélectionner tous les divs, sauf celui qui a un identifiant de conteneur. L’extrait ci-dessus gérera parfaitement cette tâche.

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