:not selector does not work for nested elements

Question

I have special styles for user generated content, which comes from RTE. And I got some custom components inserted in the user generated content via tags in RTE. Those components should have totally different styles and should not inherit user content styles.

I am trying to achieve this with :not css selector like shown in the snippet below. This works for 1st child of a class, inserted in :not, but not for its children. The third 'Hello' should not receive the red color styling (as I think), but it does. Am I doing something wrong? Is it expected behavior? How can I achieve what I am after?

.user-content :not(.component) p {
  color: red;
  font-size: 50px;
}

<!-- Styled user-content inside some wrapper -->
<div class="user-content">
  <div class="wrapper">
    <p>Hello!</p>
  </div>
</div>

<!-- A component inside user-content should be unstyled -->
<div class="user-content">
  <dov class="component">
    <p>Hello!</p>
  </dov>
</div>

<!-- But nested elements of a component still recieve styling -->
<div class="user-content">
  <div class="component">
    <div class="wrapper">
      <p>Hello!</p>
    </div>
  </div>
</div>

Answer 1

Your :not condition is met as true for your class="wrapper" elements, because they are not with component class. Using :not will apply to each element seperatly, without parent-child relationship:

<div class="user-content">
  <div class="component">       :not(.component) is false
    <div class="wrapper">       :not(.component) is true, so rule applies.
      <p>Hello!</p>
    </div>
  </div>
</div>

To create parent-child relationship, use > in your rule:

.user-content > :not(.component) p