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

StackOverflow https://stackoverflow.com/questions/1009094

  •  06-07-2019
  •  | 
  •  

Question

Disons que j'ai cette page: 

<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 les éléments H1 qui ne sont PAS dans la classe wrapper . Comment puis-je faire cela avec CSS? Je ne veux pas de "solution" comme 

body h1, body .class h1 {style definitions}

Je suis plus après une sorte de ceci: 

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

Y a-t-il un moyen de le faire?

Était-ce utile?

La solution

Et si vous faisiez quelque chose comme ça: 

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

Dans h1.class , vous remplacez tout ce que vous avez défini dans votre 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 de classe de toto .

Autres conseils

Vous ne pouvez pas faire ce que vous demandez avec css. L’idée générale autour de CSS est la cascade, et ce que vous voulez faire est de travailler à contre-courant de la cascade.

Travailler avec la marée faire des CSS réguliers: 

h1 {style definitions}
.wrapper h1 {style definitions}

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;}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top