0

Is there any way to select children without any parent of a specific class in CSS ? Let's say I have the following HTML code:

<div class="disable-common">
   <div>
      <p>Test 1</p>
   </div>
</div>
<div class="disable-common">
   <p>Test 2</p>
</div>
<div>
   <p>Test 3</p>
</div>

I want to select all p tags which are not children of a div with the disable-common class.

I manage to do it for the "Test 2" only with the following selector: div:not(.disable-common) p but unfortunately, the "Test 1" is not concerned by the selector because "Test 1" is nested in a div which didn't have the disable-commonclass. So my question is: how can I specify in my selector that I want all p without any div parent with the disable-common class. I don't even know if such a selector is possible.

Edit: Here is a plunker: https://plnkr.co/edit/vzNKIDTfRhRyYfqlivc3?p=preview

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alexandre D.
  • 711
  • 1
  • 9
  • 28
  • While working this out, another question would be, why would your HTML be inconsistent to begin with and if that would be the case to ensure it will be consistent. This is not to say to make HTML fit your CSS but it is to address a concern that multiple sections of markup which seem to represent the same type should be consistent. – Nope Mar 02 '17 at 13:44
  • Actually, I'm trying to find a quick way to exclude some specific `div` from the common stylesheet of a web application after the work of a designer on a small part of the design. I would like to put the `disable-common` class on this `div` to fix the broken style due to the `common.css` file – Alexandre D. Mar 02 '17 at 13:48
  • There is no parent selector in CSS at this time. While there might be ways of doing that in CSS one alternative is JavaScript. Here is a [**jQuery example**](http://plnkr.co/edit/38gHoDKjiu4jMnsnxFky?p=preview) that shows how you can select all `p` tags which do not have a parent with `disable-common` and apply a style to them by assigning a class to them. I know I used jQuery in the example but you can do the same in pure JavaScript with a recursive function iterating through parentNodes. – Nope Mar 02 '17 at 14:19

0 Answers0