css selector for a node which doesn't contain a given selector with class attribute

Question

How do I select the entire h4 node that doesn't contain h3 with class="avoid"? In this case I want to select the first and fourth h4 node.

<div>
<h4>
    <h1><h1>
    <h2><h2>
</h4>
<h4>
    <h1><h1>
    <h2><h2>
    <h3 class="avoid"><h3>
</h4>
    <h4>
    <h1><h1>
    <h2><h2>
    <h3 class="avoid"><h3>
</h4>
<h4>
    <h1><h1>
    <h2><h2>
</h4>
</div>

the markup is invalid: you cannot insert an heading element inside another heading — Fabrizio Calderan loves trees, Aug 27 '15 at 10:57

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

First of all. Having heading tags inside another is not valid. Saying that..

CSS is not capable of selecting a parent based on nested elements.

You need JS to do such selections. A good read is this.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 27 '15 at 10:57

Starx

72,283
42
174
253

css selector for a node which doesn't contain a given selector with class attribute

1 Answers1