CSS: Posso escolher todo o tipo de elemento que não estão dentro de uma classe específica?
-
06-07-2019 - |
Pergunta
Vamos dizer que eu tenho essa página:
<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>
E eu quero selecionar todos os elementos H1
que não estão dentro do wrapper
classe. Como posso fazer isso com CSS?
Eu não quero uma "solução" como
body h1, body .class h1 {style definitions}
Eu sou mais após algum tipo de presente:
h1:not(.wrapper > h1) {style definitions}
Existe alguma maneira de fazer isso?
Solução
E se você fez algo parecido com isto:
h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }
Em h1.class
você iria substituir tudo o que você definiu na sua regra h1
.
Aqui está um exemplo:
<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>
Neste exemplo, têm efetivamente direcionados tudo divs
que não têm uma classe de foo
.
Outras dicas
Você não pode fazer o que você está pedindo com css. A ideia toda em torno css é a cascata, eo que você está querendo fazer é trabalhar contra o fluxo da cascata.
Trabalhar com a maré fazer css normal:
h1 {style definitions}
.wrapper h1 {style definitions}
Você pode usar o seletor universal * para aplicar estilo global e, em seguida, aplicar um seletor universal aninhada: .wrapper * para desfazer a denominar-lhe aplicada originalmente
* {font-weight:bold; border:thin solid red;}
.wrapper * {font-weight:normal; border: 0px solid white;}