Select all elements and its nested childs using css :not()-CodePudding

<p>Reset works!</p>
<div >
  <p>dont reset!</p>
</div>


:not(".no-reset") p{
  margin: 0;
  color: red;

}

I tried with

I tried the above approach, not working for me.

I tried with this as well

*:not(".no-reset") p{
  margin: 0;
  color: red;

}

no luck !!

I just wanted to apply some styles under the "no-reset" child

here is link

https://jsfiddle.net/mrwL8ck9/

CodePudding user response：

You could try with this selector :

:not(.no-reset) > p

:not() takes a list of selectors as argument, you don't have to add quotes ".

You should also use the child combinator > because the p element inside your div.no-reset is also a child of body that is matched by :not(.no-reset).

:not(.no-reset) > p {
  margin: 0;
  color: red;
}

<p>Reset works!</p>
<div >
  <p>dont reset!</p>
</div>

You could also use revert. Note that this keyword is not supported on IE.

p {
  margin: 0;
  color: red;
}

.no-reset p {
  margin: revert;
  color: revert;
}

<p>Reset works!</p>
<div >
  <p>dont reset!</p>
</div>

CodePudding user response：

Try and put it like this:

:not(.no-reset) p {
  margin: 0;
  color: red;
}

The pseudo-selector :not doesn't need double quotes for selecting an element. I hope that my info on the matter can help you. Cheers