CSS - class should not apply within child components-CodePudding

I have a Parent component which two child components. All three components use accordion-group. My styles have a class as below and I want this class to apply only to the parent component. For some reason :not is not working for me. The class gets applied to the whole page so child components also get it

Class

accordion-group :not(app-child){
    .panel-heading {
        height: 44px;
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 20px;
    }

    .panel-body {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .panel-title {
        width: 100%;
    }
}

My html

   <accordian>
    <accordion-group>
       <div > 
          <div > 
            <app-child> 
             <accordian>
              <accordion-group>
               <div > 
                <div > 
                ...
                </div>
               </div>
              </accordion-group>
             </accordian>
            </app-child>
          </div>
       </div>
    </accordion-group>
   </accordian>

Updates with another simple example

html

<div > 
   <span >span1</span><br>
   <span >span2</span>
   <div>
      <span >span3</span><br>
      <span >span4</span>
   </div>
</div>

Css

div:not(div){
border:solid black;
}

I want only span1 and span2 to have the class applied.

CodePudding user response：

this selector will target span1 and span2

.acc>:not(div) {
  border: solid black;
}

<div >
  <span >span1</span><br>
  <span >span2</span>
  <div>
    <span >span3</span><br>
    <span >span4</span>
  </div>
</div>

CodePudding user response：

remove the whitespace before the :not selector

.acc:not(span) {
  border: solid black;
  }

<div >
  <span > Span1 </span> <br>
  <span > Span2 </span>
</div>

see the difference: first snippet is without whitespace, 2nd one is with whitespace

.acc :not(span) {
  border: solid black;
}

<div >
  <span > Span1 </span> <br>
  <span > Span2 </span>
</div>

Edit: Regarding your edited example. For your example you could for example do .acc > .acc{} (this would only select children with the class acc of parents with the class acc)

Just look into what CSS selectors there are, you can then basically just string them together to get whatever you need.