web-dev-qa-db-fra.com

Puis-je écrire un sélecteur CSS en sélectionnant des éléments n'ayant PAS une classe ou un attribut donné?

Je voudrais écrire une règle de sélection CSS qui sélectionne tous les éléments qui non ont une certaine classe. Par exemple, étant donné 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 sélectionne tous les éléments qui n’ont pas la classe "imprimable" qui, dans ce cas, sont les éléments nav et a.

Est-ce possible?

NOTE: dans le code HTML réel où je voudrais utiliser ceci, il y aura beaucoup plus d'éléments que ne pas ont la classe "imprimable" plutôt que (je réalise que c'est l'inverse dans l'exemple ci-dessus).

htmlcsscss-selectors
575
David Nordvall

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

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

Mais si vous avez besoin d'une meilleure prise en charge de votre navigateur (IE8 et les anciennes versions ne supportent pas :not()), vous feriez probablement mieux de créer des règles de style pour les éléments qui do ont la classe "imprimable". Si même cela n’est pas réalisable malgré ce que vous dites à propos de votre majoration réelle, vous devrez peut-être utiliser votre majoration 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 are.printable, ou les affecter d'une manière ou d'une autre. Par exemple, bien que display ne soit pas hérité, définir display: none sur une :not(.printable) l'empêchera ainsi que tous ses descendants de s'afficher puisqu'il supprime complètement l'élément et son sous-arbre de la présentation. Vous pouvez souvent contourner ce problème en utilisant à la place visibility: hidden, ce qui permettra aux descendants visibles de s'afficher, mais les éléments masqués affecteront toujours la mise en page comme ils le faisaient à l'origine. En bref, soyez prudent.

814
BoltClock
:not([class])

En fait, cela sélectionnera tout ce qui n’aura pas de classe css (class="css-selector") appliquée à celle-ci.

J'ai fait une démo jsfiddle

    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>

Cette fonction est-elle prise en charge? Oui: Caniuse.com (consulté le 25 août 2014) :

  • Soutien: 88,85%
  • Support partiel: 4.36%
  • Total: 93,21%

Drôle de montage, j'étais sur Google pour le contraire de: pas. Négociation CSS?

selector[class]  /* the oposite of :not[]*/
154
Milche Patern

La :not pseudo classe de négation

La pseudo-classe CSS de la négation, :not(X), est une notation fonctionnelle prenant un simple sélecteur X en argument. Cela 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 correspondants, ordonné comme vous le feriez avec des sélecteurs CSS normaux.

Exemple simple: exclure par classe

div:not(.class)

Sélectionnerait tous les éléments div sans la classe _.class_

_div:not(.class) {
  color: red;
}_
_<div>Make me red!</div>
<div class="class">...but not me...</div>_

Exemple complexe: exclure par type/hiérarchie

:not(div) > div

Sélectionnerait tous les 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îner des pseudo-sélecteurs

À l'exception notable de l'impossibilité de chaîner/imbriquer des sélecteurs et des pseudo-éléments _:not_, vous pouvez les utiliser 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 support est qu'il est IE9 +

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

le pseudo :not() permet l'écriture de sélecteurs inutiles. Par exemple, :not(*|*), qui ne représente aucun élément, ou foo:not(bar), qui équivaut à foo mais avec une spécificité supérieure.

100
SW4

Je pense que cela devrait fonctionner:

:not(.printable)

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

20
Eregrith

Tout comme pour contribuer au fait que les réponses ci-dessus de: not () peuvent être très efficaces sous les formes angular, 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'indiquent l'invalide (bordures rouges ou arrière-plans, etc.) que s'ils ont des données ajoutées (c'est-à-dire qui ne sont plus d'origine) mais sont invalides.

9
BaneStar007

Exemple

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

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

4
Hakan

Utilisation de la pseudo-classe :not():

Pour tout sélectionner sauf un certain élément (ou éléments). Nous pouvons utiliser la :not()pseudo classe CSS. La pseudo-classe :not() requiert un sélecteur CSS comme argument. Le sélecteur appliquera les styles à tous les éléments à l'exception des éléments spécifiés en tant qu'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’ajuster facilement 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>
2
Willem van der Veen

Vous pouvez utiliser le 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 n'oubliez pas de l'exécuter sous Apache, sinon vous ne verrez pas l'effet.

2
MelkorNemesis