Puis-je écrire un sélecteur CSS qui sélectionne les éléments NE possédant PAS une certaine classe ou un certain attribut ?

Question

Puis-je écrire un sélecteur CSS qui sélectionne les éléments NE possédant PAS une certaine classe ou un certain attribut ?

Demandé el 2 de Février, 2012: Quand la question a-t-elle été
41133 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je voudrais écrire une règle de sélection CSS qui sélectionne tous les éléments qui Ne le fais pas. ont une certaine classe. Par exemple, étant donné le 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 "printable" qui, dans ce cas, sont les éléments nav y a éléments.

Est-ce possible ?

REMARQUE : dans le code HTML réel où je voudrais utiliser cette fonction, il y aura beaucoup plus d'éléments qui Ne le fais pas. ont la classe "printable" (je réalise que c'est l'inverse dans l'exemple ci-dessus).

Demandé el 2 de Février, 2012 par David Nordvall

Answer 1

5 Réponses

Answer 2

1154voto

BoltClock Points 249668

En général, vous ajoutez un sélecteur de classe à la balise :not() pseudo-classe ainsi :

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

:not([attribute]) {
    /* Styles */
}

Mais si vous avez besoin d'un meilleur support du navigateur (IE8 et plus anciens ne supportent pas :not() ), il est probablement préférable de créer des règles de style pour les éléments qui faire ont la classe "printable". Si même cela n'est pas possible malgré ce que vous dites à propos de votre balisage actuel, 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 les descendants qui son .printable ou les affecter d'une manière ou d'une autre. Par exemple, bien que display n'est pas hérité, le paramètre display: none sur un :not(.printable) l'empêchera de s'afficher, ainsi que tous ses descendants, puisqu'il supprime complètement l'élément et son sous-arbre de la disposition. Vous pouvez souvent contourner ce problème en utilisant visibility: hidden à la place, ce qui permettra aux descendants visibles de s'afficher, mais les éléments cachés affecteront toujours la mise en page comme ils le faisaient à l'origine. En bref, soyez prudent.

Répondu el 2 de Février, 2012 par BoltClock (249668 Points )

4 votes

À titre d'information, la prise en charge par les navigateurs des aspects de CSS compatibles avec les médias est souvent la même pour tous les types de médias. :not() à l'écran, il ne le supportera pas non plus à l'impression.

Commenté el 2 de Février, 2012 par BoltClock

29 votes

Notez que :not() ne prend qu'un simple sélecteur ce qui signifie qu'il ne peut pas contiennent des sélecteurs imbriqués comme :not(div .printable) - voir Syntaxe du sélecteur W3C

Commenté el 8 de Juillet, 2016 par Steve Eynon

1 votes

Je viens de l'essayer pour .active : a :not(.active a) n'a pas fonctionné pour moi. Mais, a:not(.active) a fonctionné !

Commenté el 8 de Juin, 2018 par user2367418

Afficher 5 autres commentaires

Answer 3

218voto

Milky ways patterns Points 5011

:not([class])

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

J'ai fait un jsfiddle Démonstration

    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 que cela est soutenu ? Oui : Caniuse.com (consulté le 02 jan 2020) :

Support : 98.74%
Soutien partiel : 0.1%
Total : 98,84 %.

Drôle d'édition, je cherchais sur Google l'opposé de :not. La négation CSS ?

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

Répondu el 4 de Mars, 2014 par Milky ways patterns (5011 Points )

Answer 4

126voto

SW4 Points 26395

El `:not` pseudo-classe de négation

La pseudo-classe CSS de négation, :not(X) est une notation fonctionnelle prenant un sélecteur simple X comme argument. Elle 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 n'importe quel sous-ensemble d'éléments correspondants, ordonnés comme vous le feriez avec des sélecteurs CSS normaux.

Exemple simple : exclusion par classe

div:not(.class)

Sélectionnerait tous div 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

Sélectionnerait tous div les éléments qui ne sont pas 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 : enchaînement de pseudo-sélecteurs

A l'exception notable de l'impossibilité de chaîner/nicher. :not Les sélecteurs et les pseudo-éléments, que 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 des navigateurs etc.

:not est un Sélecteur de niveau CSS3 La principale exception en termes de soutien est qu'il s'agit d'un système de gestion de la qualité. IE9+.

La spécification soulève également un point intéressant :

le site :not() Le pseudo permet d'écrire des sélecteurs inutiles. Pour exemple :not(*|*) qui ne représente aucun élément, ou foo:not(bar) ce qui est équivalent à foo mais avec une plus grande spécificité.

Répondu el 2 de Janvier, 2015 par SW4 (26395 Points )

Answer 5

27voto

Eregrith Points 2084

Je pense que ça devrait marcher :

:not(.printable)

Desde "Réponse "sélecteur css négatif .

Répondu el 2 de Février, 2012 par Eregrith (2084 Points )

Answer 6

10voto

BaneStar007 Points 328

Je voudrais juste ajouter que les réponses ci-dessus de :not() peuvent être très efficaces dans les formulaires 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; ...}

Veille à ce que, lors du chargement de votre page, les champs de saisie n'affichent l'invalidité (bordures ou fonds rouges, etc.) que si des données ont été ajoutées (c'est-à-dire qu'elles ne sont plus vierges) mais qu'elles sont invalides.

Répondu el 6 de Avril, 2016 par BaneStar007 (328 Points )

Puis-je écrire un sélecteur CSS qui sélectionne les éléments NE possédant PAS une certaine classe ou un certain attribut ?

Réponses

El `:not` pseudo-classe de négation

Exemple simple : exclusion par classe

Exemple complexe : exclusion par type / hiérarchie

Exemple complexe : enchaînement de pseudo-sélecteurs

Support des navigateurs etc.

Questions en vedette

Top Tags

Prograide.com

Powered by:

Puis-je écrire un sélecteur CSS qui sélectionne les éléments NE possédant PAS une certaine classe ou un certain attribut ?

Réponses

El :not pseudo-classe de négation

Exemple simple : exclusion par classe

Exemple complexe : exclusion par type / hiérarchie

Exemple complexe : enchaînement de pseudo-sélecteurs

Support des navigateurs etc.

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

El `:not` pseudo-classe de négation