CODEWITHSUNDEEP
csscss-selectors
Zyberzero
Zyberzero

Reputation: 1604

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

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?

Upvotes: 2

Views: 816

Answers (3)

Steve Perks
Steve Perks

Reputation: 5530

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}

Upvotes: 0

Andrew Hare
Andrew Hare

Reputation: 351476

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.

Upvotes: 2

James Conigliaro
James Conigliaro

Reputation: 3829

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

Upvotes: -1

Related Questions