CSS: Puis-je sélectionner chaque type d'élément qui ne fait pas partie d'une classe spécifique?
-
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?
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;}