querySelectorAll exclude all children-CodePudding

I'm using querySelectorAll and want to exclude all children of a number of elements. Trying this does not work.

document.querySelectorAll(".h:not(.p)").forEach(function(e){
  e.style.color = "red";
});

<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>
<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>
<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>

How can I achieve only selecting parent elements? Does such a selector exist?

CodePudding user response：

This is only selecting the .h elements:

document.querySelectorAll(".h")

But what are you doing with those elements? You're setting the text color to red:

e.style.color = "red";

So all text within those elements will be red, unless styled otherwise. If the .p elements should be something else, style them as such:

document.querySelectorAll(".h").forEach(function(e){
  e.style.color = "red";
});

.p {
  color: black;
}

<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>
<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>
<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>

Alternatively you might consider re-structuring your HTML. For example:

<div>
  <span >Hello World!</span>
  <p >This is a paragraph.</p>
</div>
<div>
  <span >Hello World!</span>
  <p >This is a paragraph.</p>
</div>
<div>
  <span >Hello World!</span>
  <p >This is a paragraph.</p>
</div>

Then you can specifically target the content you want without having to find ways to "exclude" other content.

CodePudding user response：

If you give a parent a color, that will be inherited by the children as well, by default. Your code is selecting only the parents, the .hs, as you want - the problem is that the children inherit that style as well.

One option is to iterate over the children or descendant <p>s as well, and change their colors to what you want, so they don't inherit from the parent.

document.querySelectorAll(".h").forEach(function(e){
  e.style.color = "red";
});
document.querySelectorAll(".h .p").forEach(function(e){
  e.style.color = "initial";
});

<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>
<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>
<div >
  Hello World!
  <p >This is a paragraph.</p>
</div>

A nicer looking option would be to give the text to be colored its own element, and then select those elements only:

document.querySelectorAll(".h span").forEach(function(e){
  e.style.color = "red";
});

<div >
  <span>Hello World!</span>
  <p >This is a paragraph.</p>
</div>
<div >
  <span>Hello World!</span>
  <p >This is a paragraph.</p>
</div>
<div >
  <span>Hello World!</span>
  <p >This is a paragraph.</p>
</div>

CodePudding user response：

The color is being inherited in the paragraph

document.querySelectorAll(".h:not(.p)").forEach(function(e){
  e.style.color = "red";
  e.querySelectorAll(".p").forEach(function(elem) {
    elem.style.color = "black";
  });
});