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 am trying to hide all but the first of type for .slide:

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

This seems to be hiding all the .slide divs rather than "all but the first" as intended, doesn't it?

Answer 1

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

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

If you want to hide all but 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;
        }
    }
}