CSS: ¿Puedo seleccionar todos los tipos de elementos que no están dentro de una clase específica?

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

  •  06-07-2019
  •  | 
  •  

Pregunta

Digamos que tengo esta 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>

Y quiero seleccionar todos los elementos H1 que NO están dentro de la clase wrapper . ¿Cómo puedo hacer eso con CSS? No quiero una "solución" me gusta 

body h1, body .class h1 {style definitions}

Estoy más después de algún tipo de esto: 

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

¿Hay alguna manera de hacer esto?

¿Fue útil?

Solución

¿Qué pasa si hiciste algo como esto? 

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

En h1.class anularía todo lo que definió en su regla h1 .

Aquí hay un ejemplo: 

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

En este ejemplo, he dirigido efectivamente a todos los divs que no tienen una clase de foo .

Otros consejos

No puedes hacer lo que estás pidiendo con css. La idea general de css es la cascada, y lo que quieres hacer es trabajar contra el flujo de la cascada.

Trabaja con la marea haciendo CSS regular: 

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

Puede usar el selector universal * para aplicar un estilo global y luego aplicar un selector universal anidado: .wrapper * para deshacer el estilo que aplicó originalmente 

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

.wrapper * {font-weight:normal; border: 0px solid white;}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top