2009-06-17 3 views
2

Disons que je suis arrivé cette page:CSS: Puis-je sélectionner chaque type d'élément qui ne fait pas partie d'une classe spécifique?

<body> 
    <h1>Hello!</h1> 
    <div class="wrapper"> 
     <div class="anotherclass"> 
      <h1>Another heading 1</h1> 
     </div> 
     <div class="yetanotherclass"> 
      <h1>Yet another heading 1</h1> 
     </div> 
    </div> 
    <h1>Good bye!</h1> 
    <div class="class"> 
     <h1>Good bye. And this time I mean it.</h1> 
    </div> 
</body> 

Et je veux sélectionner tous H1 éléments qui ne sont pas dans le wrapper -class. Comment puis-je faire ça avec CSS? Je ne veux pas une « solution » comme

body h1, body .class h1 {style definitions} 

Je suis plus après une sorte de ceci:

h1:not(.wrapper > h1) {style definitions} 

Est-il possible de le faire?

Répondre

2

Que faire si vous avez fait quelque chose comme ceci:

h1 { /* rules for everything without the class */ } 
h1.class { /* rules for everything with the class */ } 

En h1.class vous remplacer tout ce que vous avez défini dans la règle h1.

Voici un exemple:

<html> 
    <head> 
     <style type="text/css"> 
       div { color:#00f; } 
       div.foo { color:#f00; } 
     </style> 
    </head> 
    <body> 
     <div class="foo">foo</div> 
     <div>bar</div> 
     <div>baz</div> 
    </body> 
</html> 

Dans cet exemple, j'ai effectivement ciblé tous les divs qui n'ont pas une classe de foo.

+0

Ce n'est pas possible avec ma solution actuelle. Je ne peux pas changer le code HTML car il est chargé avec un Javascript d'un serveur externe, ainsi je ne peux pas placer une classe sur les en-têtes. – Zyberzero

+0

J'ai édité ma réponse pour enlever les classes sur l'exemple. Vous n'aurez pas du tout besoin de modifier le code HTML car la première règle définira le style pour les éléments _all_ et la deuxième règle ne s'appliquera qu'à celle avec la classe que vous souhaitez exclure. –

-1

Vous pouvez utiliser le sélecteur universel * pour appliquer un style global, puis appliquer un sélecteur universel imbriqué: .wrapper * pour annuler le style que vous avez appliqué à l'origine

* {font-weight:bold; border:thin solid red;} 

.wrapper * {font-weight:normal; border: 0px solid white;} 
+0

Le truc c'est que je vais utiliser ce sélecteur comme une entrée pour un javascript qui comprend en quelque sorte les sélecteurs css - mais pas ces variantes imbriquées. Ce doit être une chose "d'une seule ligne" – Zyberzero

+0

"sorte de comprend css sélecteurs" suggère jQuery. Vous pouvez certainement ajouter des classes cibles aux parents, etc. dans jQuery. –

+0

C'est en fait une implentation de SIFR que je fais en combinaison avec un éditeur de texte enrichi. L'éditeur de texte enrichi est dans une div spécifique qui contient des éléments de type h2 et h3 et pour ceux que je ne veux pas que sIFR remplace le texte mais sur tous les autres éléments de ce type. – Zyberzero

0

Vous ne pouvez pas faire ce que vous demandez avec css. L'idée de CSS est la cascade, et ce que vous voulez faire, c'est travailler contre le flux de la cascade.

travail avec la marée faire régulièrement css:

h1 {style definitions} 
.wrapper h1 {style definitions} 
Questions connexes