CSS: Posso escolher todo o tipo de elemento que não estão dentro de uma classe específica?

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

  •  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?

Foi útil?

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;}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top