select all the <P> outside a particular div (class) - css

Question

I want to select all the <p> tag except the ones inside the div whose class is div-class. I tried the following and it didn't do the job.
<style>
p:not(.div-class p) {
color:red;
}
</style>
<p> a p tag outside the div </p>
<div class="div-class">
<p> a p tag inside the div </p>
</div>
<p> a p tag outside the div </p>
p:not(.div-class p) - this selector is not working.

Answer 1

You can use :not(.div-class) p to select all p tags that are not a descendant of an element with class='div-class'. The p:not(.div-class p) selector does not work because the :not pseudo-class takes only simple selectors as argument. You can refer here for the list of simple selectors.
:not(.div-class) p {
color: red;
}
.div-class p {
color: blue;
}
<p>a p tag outside the div</p>
<div class="div-class">
<p>a p tag inside the div</p>
</div>
<p>a p tag outside the div</p>
The approach provided by Shomz (in his deleted answer+) can also work for your case depending on the objective. If you can override the color for the more specific selector (the ones having the class) then that approach would be a bit more easier to understand and adopt.
However, if you can't override (or don't want to override) then this approach would be better. But the trouble is that if you don't override then :not(.div-class) p ends up selecting all p tags as body also doesn't have class='div-class'.
Selecting only the p which are not under an element with class='div-class' becomes very tricky when the p is not a direct child of element with class='div-class' and the p directly under body also need to be styled. The below snippet is a sample approach using a combination of selectors.
body > p,
body > *:not(.div-class) p {
color: red;
}
<p>a p tag outside the div</p>
<div class="div-class">
<p>a p tag inside the div</p>
</div>
<p>a p tag outside the div</p>
<div class="div-class">
<div class="some-inner-class">
<p>a p tag deep inside the div</p>
</div>
</div>
<div class="some-other-class">
<p>a p tag inside some other class div</p>
</div>
<div class="some-other-class">
<div class="some-other-inner-class">
<p>a p tag deep inside some other class div</p>
</div>
</div>
+ - The below is the approach that was originally provided in Shomz' answer. I am including it here just for context.
p {
color:red;
}
.div-class p {
color:blue;
}
<p> a p tag outside the div </p>
<div class="div-class">
<p> a p tag inside the div </p>
</div>