Select all elements but not in parent with specific class

Question

I have following scenario and I can't figure out how to select all p elements but not in div with content class:

<div class="content">
  <p></p> <!-- not this one -->
  <p></p> <!-- not this one -->
  <div>
   <p></p> <!-- not this one because this is also inside content -->
  </div>
</div>

<div class="other">
  <p></p> <!--this one -->
</div>
<p></p> <!--this one -->

So I just want to select all p elements but not elements inside element with class="content".

More info: I have application that content is dynamically generated. In this content there are some p elements that I don't want to apply the styles.

Some brilliant developer add this kind of style in the beginning of the project:

p {
  color: #333;
  font-size: 12px!important;
  line-height: 18px!important;
  margin: 0!important;
}

So as You see this applies to all p elements. My task is to fix only content rendering so it will have different font-size etc... So I though I will change p selector to exclude those inside content class. If I change this definition of p css style then I can unintentionally change some other subpage so I don't want to mess with that because I just want to make it fast without going deep into the code and html created by this developer. The rest of the page is working fortunately very well but I don't know how to nail all those elements in content class only and leaving the rest of p elements as it was untouched.

dp the opposite and select all the `p` you don't want and disable the CSS you want to apply for the other — Temani Afif, Aug 12 '19 at 13:45
The answer is - you can't. This might help: https://stackoverflow.com/questions/31268382/css-selector-for-something-not-inside-something-else — vovchisko, Aug 12 '19 at 13:53
you can using NOT selector like this. :not(.content) p{ /* Styles */ } — Majid Azarniush, Aug 12 '19 at 14:12
I made an edit to my answer trying to address the edit you made on your question, check it — Calvin Nunes, Aug 13 '19 at 11:42

Calvin Nunes · Accepted Answer · 2019-08-13T11:41:28.147

4

You can select all p tags and then add a CSS style to the ones that you don't want to select, in this case .content p.
See below code with this idea.

But, if possible, add a common class to the p that you want to select or a common class to the p that you don't want to select, it would be much more controllable.

EDIT
Since you eddited the question explaining that you have p styled with !important values and don't want to change, I made an edit here to try to fix the p that is inside .content. You'll need to force !important there too, modifying the values to unset (or other value that you want) check it:

p {
  color: #333;
  font-size: 12px !important;
  line-height: 18px !important;
  margin: 0 !important;
}

.content p{
  color: unset !important;
  font-size: initial !important;
  line-height: 25px !important;
  margin: initial !important;
}

<div class="content">
  <p>1</p>
  <!-- not this one -->
  <p>2</p>
  <!-- not this one -->
  <div>
    <p>3</p>
    <!-- not this one because this is also inside content -->
  </div>
</div>

<div class="other">
  <p>4</p>
  <!--this one -->
</div>
<p>5</p>
<!--this one -->

edited Aug 13 '19 at 11:41

answered Aug 12 '19 at 13:47

Calvin Nunes

6,376
4
20
48

with due respect i think we can make it better without using `!important`. Thank you ! – Amarjit Singh Aug 13 '19 at 12:40
1

of course, `!important` is not a good solution, but based on what OP said *"...If I change this definition of p css style then I can unintentionally change some other subpage so I don't want to mess ..."* he don't want to change `p` selector, so he will keep the `!important` there, creating the need to use the same technique on any other `p` selectors that may be conflict with this one – Calvin Nunes Aug 13 '19 at 12:49
1

Thanks @CalvinNunes. This is exactly what I was looking for to solve this not usual use case. Thank You very much for Your time to read my question and situation around it. I was not aware that `!important` can be overridden by specify more detailed selector. New lesson learnt. Thank You Man! :) – Marcin Kapusta Aug 13 '19 at 15:25

score 0 · Answer 2 · answered Aug 13 '19 at 12:33

I think simplest way to do that code for .content p to be on the top of the p as in below, no need to use of important.

.content p{
  color: red;
  font-size: 24px;
}
p {
  color: blue;
  font-size: 14px;
  line-height: 18px;
  margin: 0;
}

<div class="content">
  <p>1</p>
  <!-- not this one -->
  <p>2</p>
  <!-- not this one -->
  <div>
    <p>3</p>
    <!-- not this one because this is also inside content -->
  </div>
</div>

<div class="other">
  <p>4</p>
  <!--this one -->
</div>
<p>5</p>
<!--this one -->

Select all elements but not in parent with specific class

2 Answers2