0

I'm having a really strange problem with my Sass/CSS. I have a rule that is executed with and without the :not() selector, but I don't think it should be applied with :not().

This runs:

.background-color-white {
    .breadcrumbs-primer {
        position: relative;
        z-index: 1;
        li, a, li:after, li a:after {
            color: $color-white;
        }
    }
}

But so does this:

:not(.background-color-white) {
    .breadcrumbs-primer {
        position: relative;
        z-index: 1;
        li, a, li:after, li a:after {
            color: $color-white;
        }
    }
}

and .breadcrumbs-primer is nested inside .background-color-white in my HTML as you can see here: 

<div class="background-color-white">
   <!-- breadcrumbs -->
   <div class="breadcrumbs-primer padding-top-small">
      <div class="row">
         <div class="small-12 columns">
            <ul class="breadcrumbs">
               <li><a href="#">Home</a></li>
               <li class="disabled">Lorem ipsum dolar</li>
            </ul>
         </div>
      </div>
   </div>
   <!-- end breadcrumbs -->
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Eddy Vinck
  • 410
  • 1
  • 4
  • 16
  • 1
    because there is for example the body that match the :not() selector ... use direct child selector and it won't work – Temani Afif Mar 22 '18 at 13:02
  • @boltclock i was pretty sure there was a dup but didn't find it .. and now i wasted my time writing half a similar answer to yours :p – Temani Afif Mar 22 '18 at 13:16
  • Thanks @boltclock, I couldn't find that post. I fixed it by putting `.container` before `:not()` resulting in `.container :not(.background-color-white) .breadcrumbs-primer .breadcrumbs` but I will look into that question's answer :) – Eddy Vinck Mar 22 '18 at 13:25

0 Answers0