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

9voto

Hakan Points 825

Exemple

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

// Opacité 0.6 pour tous les "section-" mais pas pour "section-name".

Répondu el 21 de Septembre, 2016 par Hakan (825 Points )

Answer 3

6voto

Mihai Points 21

Si vous voulez une classe spécifique menu pour avoir une CSS spécifique si la classe manquante connecté à :

body:not(.logged-in) .menu  {
    display: none
}

Répondu el 5 de Février, 2020 par Mihai (21 Points )

Answer 4

5voto

Willem van der Veen Points 3360

Utilisation de la `:not()` pseudo-classe :

Pour sélectionner tout sauf un certain élément (ou certains éléments). On peut utiliser la fonction :not() Pseudo-classe CSS . Le site :not() La pseudo-classe requiert une CSS comme argument. Le sélecteur appliquera les styles à tous les éléments, à l'exception de ceux qui sont 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'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>

Répondu el 18 de Septembre, 2018 par Willem van der Veen (3360 Points )

Answer 5

2voto

MelkorNemesis Points 544

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

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

Répondu el 9 de Septembre, 2013 par MelkorNemesis (544 Points )

3 votes

Que voulez-vous dire par l'exécuter sous Apache ? Selectivizr est une librairie frontale, elle n'a rien à voir avec le logiciel du serveur.

Commenté el 11 de Avril, 2014 par Kloar

0 votes

Il effectue une requête ajax - qui ne fonctionne pas sans un serveur http.

Commenté el 15 de Avril, 2014 par MelkorNemesis

Answer 6

-1voto

HBhering Points 17

Comme d'autres l'ont dit, il suffit de mettre :not(.class). Pour les sélecteurs CSS, je vous recommande de visiter ce lien, il m'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

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

La pseudo-classe de négation est particulièrement utile. Supposons que je veuille sélectionner toutes les divisions, à l'exception de celle dont l'id est container. L'extrait ci-dessus s'acquittera parfaitement de cette tâche.

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

*:not(p) {
  color: green;
}

Répondu el 12 de Décembre, 2017 par HBhering (17 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

Utilisation de la `:not()` pseudo-classe :

Exemples :

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

Utilisation de la :not() pseudo-classe :

Exemples :

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

Utilisation de la `:not()` pseudo-classe :