CSS for a div and its children excluding one particular child and that child's children

I have nested blocks like this, I don’t know how many nested block there :

<div class="my-class">
   ...
   <div class="exclude-my-class">
      <div>
      </div>
   </div>
   <div>
      <div>
      </div>
   </div>
   ...
</div>

I want to write styles for “my-class” and its children but exclude “exclude-my-class” and its children using css. I don’t know in which level can be “exclude-my-class” classes

Something like

.my-class:not(.exclude-my-class), 
.my-class *:not(.exclude-my-class, .exclude-my-class *){
    //styles
}

How do I achieve this?

Use below code

.my-class : not(.exclude-my-class)

The question has been asked before.

Borrowing from this answer, you can’t. The :not() pseudo-class in Selectors level 3 is very limited by itself. You can only pass a single simple selector as an argument to :not(). This means you can pass only any one of these at a time:

  • Universal selector (*), optionally with a namespace
  • Type selector (a, div, span, ul, li, etc), optionally with a namespace
  • Attribute selector ([att], [att=val], etc), optionally with a namespace
  • Class selector (.class)
  • ID selector (#id)
  • Pseudo-class (:pseudo-class)

HTMl:

<div class="my-class">
   <div class="exclude-my-class">
      <div >
        Skipped
      </div>
   </div>
   <div>
      <div>
      not skipped
      </div>
   </div>   

   <div class="exclude-my-class">
      <div >
      skipped
      </div>
      <div >
      skipped
      </div>
   </div>
    <div>
      <div>
      not skipped
      </div>
      <div>
      not skipped
      </div>
   </div>   
    <div>
      <div>
      not skipped
      </div>
   </div>   
    <div>
      <div>
      not skipped
      </div>
   </div>   
</div>

CSS: Select all the children of the children of my-class but not children if the direct child of my-class is exclude my class.

.my-class div:not(.exclude-my-class) div{
    background-color: red;
}

CSS: Select all the children of my class but not children with exclude-my-class.

.my-class > div:not(.exclude-my-class){
    background-color: red;
}