CODEWITHSUNDEEP
cssangular
user2837961
user2837961

Reputation: 1555

CSS - class should not apply within child components

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 class="panel-heading"> 
          <div class="panel-title"> 
            <app-child> 
             <accordian>
              <accordion-group>
               <div class="panel-heading"> 
                <div class="panel-title"> 
                ...
                </div>
               </div>
              </accordion-group>
             </accordian>
            </app-child>
          </div>
       </div>
    </accordion-group>
   </accordian>

Updates with another simple example

html

<div class="acc"> 
   <span class="acc">span1</span><br>
   <span class="acc">span2</span>
   <div>
      <span class="acc">span3</span><br>
      <span class="acc">span4</span>
   </div>
</div>

Css

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

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

Upvotes: 0

Views: 275

Answers (2)

Lord-JulianXLII
Lord-JulianXLII

Reputation: 1249

remove the whitespace before the :not selector

.acc:not(span) {
  border: solid black;
  }
<div class="acc">
  <span class="acc"> Span1 </span> <br>
  <span class="acc"> Span2 </span>
</div>

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

.acc :not(span) {
  border: solid black;
}
<div class="acc">
  <span class="acc"> Span1 </span> <br>
  <span class="acc"> 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.

Upvotes: 0

Mr. Stash
Mr. Stash

Reputation: 3130

this selector will target span1 and span2

.acc>:not(div) {
  border: solid black;
}
<div class="acc">
  <span class="acc">span1</span><br>
  <span class="acc">span2</span>
  <div>
    <span class="acc">span3</span><br>
    <span class="acc">span4</span>
  </div>
</div>

Upvotes: 1

Related Questions