Sass &: not (: first-of-type) hides everything with the class

Question

I have a div structure that looks like this:

<div class="jumbotron jumbotron-fluid bg-inverse text-white">
  <div class="container">
    <div class="row align-items-center">
      <div class="slide col-md-8">
        ...
      </div>
      <div class="slide col-md-8">
        ...
      </div>
    </div>
  </div>
</div>

And in my Sass file, I'm trying to hide everything except the first type for .slide:

.jumbotron {
  background-color: $white;
  color: $black;
  margin-bottom: 0;
  min-height: 100vh - $navbar-height;
  .slide {
    &:not(:first-of-type) {
      display: none;
    }
  }
}

It seems that all .slidedivs are hiding , and not "all but the first", as expected, right?

Answer 1

:first-of-type can only be used to select elements, not classes in the parent element.

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

If you want to hide everything except the first .slide, you can use the general sibling selector~

.jumbotron {
    background-color: $white;
    color: $black;
    margin-bottom: 0;
    min-height: 100vh - $navbar-height;
    .slide {
        ~ .slide {
            display: none;
        }
    }
}