CSS: Can I select every type of element that are not within a specific class?

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

  •  06-07-2019
  •  | 
  •  

Question

Let say I got this 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>

And I want to select all H1 elements that are NOT within the wrapper-class. How can I do that with CSS? I don't want a "solution" like

body h1, body .class h1 {style definitions}

I'm more after some kind of this:

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

Is there any way to do this?

Was it helpful?

Solution

What if you did something like this:

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

In h1.class you would override everything that you defined in your h1 rule.

Here is an example:

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

In this example I have effectively targeted all divs that do not have a class of foo.

OTHER TIPS

You can't do what you're asking with css. The whole idea around css is the cascade, and what you're wanting to do is work against the flow of the cascade.

Work with the tide do regular css:

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

You can use the universal selector * to apply global styling and then apply a nested universal selector: .wrapper * to undo the styling you applied originally

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

.wrapper * {font-weight:normal; border: 0px solid white;}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top