Question 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élection CSS qui sélectionne tous les éléments ne pas avoir une certaine classe. Par exemple, compte tenu du 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 sélectionne tous les éléments qui n'ont pas la classe "imprimable" qui, dans ce cas, sont les nav et une éléments.

Est-ce possible?

NOTE: dans le HTML actuel où je voudrais l'utiliser, il y aura beaucoup plus d'éléments ne pas avoir la classe "imprimable" que faire (je me rends compte que c'est l'inverse dans l'exemple ci-dessus).


451
2018-02-02 09:59


origine


Réponses:


Généralement, vous ajoutez un sélecteur de classe au :not() pseudo-classe comme ça:

: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()), vous êtes probablement mieux de créer des règles de style pour les éléments faire avoir 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 soit être héritées par des descendants sont  .printable, ou les affecter d'une manière ou d'une autre. Par exemple, bien que display n'est pas hérité, réglage display: none sur un :not(.printable) l'empêchera ainsi que tous ses descendants d'afficher, car il supprime complètement l'élément et son sous-arbre de la mise en page. Vous pouvez souvent contourner cela en utilisant visibility: hidden à la place, ce qui permettra aux descendants visibles de montrer, mais les éléments cachés affecteront toujours la disposition comme ils l'ont fait à l'origine. En bref, soyez prudent.


629
2018-02-02 10:02



:not([class])

En fait, cela sélectionnera tout ce qui n’a pas de classe css (class="css-selector") appliqué à 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 supporté?  Oui: Caniuse.com (consulté le 25 août 2014):

  • Support: 88,85%
  • Support partiel: 4,36%
  • Total: 93,21%

Drôle de montage, je cherchais l'inverse de: non. CSS négation?

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

134
2018-03-04 21:30



le :not négation pseudo-classe

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

Vous pouvez utiliser :not pour exclure tout sous-ensemble d'éléments correspondants, classés comme vous le feriez des sélecteurs CSS normales.


Exemple simple: exclure par classe

div:not(.class)

Tout sélectionner 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

Tout sélectionner div éléments qui ne sont pas les enfants d'un autre div

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 / nicher :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>


Support du navigateur, etc.

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

La spécification fait également un point intéressant:

la :not() pseudo permet d'écrire des sélecteurs inutiles. Pour   exemple :not(*|*), qui ne représente aucun élément, ou    foo:not(bar), ce qui équivaut à foo mais avec un plus haut   spécificité.


79
2018-01-02 12:35



Je pense que cela devrait fonctionner:

:not(.printable)

De "sélecteur CSS négatif" réponse.


16
2018-02-02 10:04



Juste pour contribuer que les réponses ci-dessus de: not () peuvent être très efficaces dans des 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; ...}

S'assure que lors du chargement de votre page, les champs de saisie n'afficheront que l'invalide (bordures rouges ou arrière-plans, etc.) s'ils ont des données ajoutées (c'est-à-dire non plus intactes) mais ne sont pas valides.


5
2018-04-06 01:02



Exemple

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

// Opacité 0.6 tout "section-" mais pas "nom-section"


2
2017-09-21 06:35



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

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


1
2017-09-09 16:07



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

-1
2017-12-12 03:55