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

Question

<p>Reset works!</p>
<div class="no-reset">
  <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/

Can you explain what you actually mean here, with _"I just wanted to apply some styles under the "no-reset" child"_? If you want to format `p` elements that are descendants of `.no-reset`(?), then why is `:not()` in play? `.no-reset p` would be the matching selector for _that_. — CBroe, Mar 07 '22 at 15:00
I dont understand the reason why you want to make what a normal class does inversed. I mean you can add color: red to "no-reset" for example and color: black to "p" tag — Castle, Mar 07 '22 at 15:03
it is just a use case. there too many things I have to play around this — Chandrakant, Mar 07 '22 at 16:02
@CBroe coz - I want to stylize all elements within DOM, however, those styles shouldn't be applied to the specific DIV and its child/descendants — Chandrakant, Mar 07 '22 at 16:04

Tom · Answer 1 · 2022-03-07T16:13:17.947

2

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 class="no-reset">
  <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 class="no-reset">
  <p>dont reset!</p>
</div>

edited Mar 07 '22 at 16:13

answered Mar 07 '22 at 15:22

Tom

4,972
3
10
28

P is not a direct child, hierarchy can be anything – Chandrakant Mar 07 '22 at 16:00
@Chandrakant I added another possibility. – Tom Mar 07 '22 at 16:14

score 0 · Answer 2 · edited Mar 07 '22 at 15:11

0

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

edited Mar 07 '22 at 15:11

Sean

6,873
4
21
46

answered Mar 07 '22 at 14:59

Oris Sin

1,023
1
13
33

still it is not working work as expected – Chandrakant Mar 07 '22 at 16:00

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

2 Answers2