Scss child styling not applied

I can't figure out why my .notes-list__item__contents isn't getting a white color on .note-list__item:hover... What am I doing wrong with my selector? I couldn't find similar case in the docs.

.notes-list {      list-style-type: none;      margin: 0;      padding: 0;        &__item {          padding: 30px;          background-color: $secondary-color;          border-radius: 15px;          margin-bottom: 15px;            &:hover {              background-color: $accent-color;              color: #fff;                &__contents { color: #fff; }          }            &__title {              font-size: 1.125rem;              font-weight: 600;          }            &__contents {              margin-top: 20px;              color: $text-color;              font-weight: 500;          }      }  }

<li className="notes-list__item">      <div className="notes-list__item__title">Title</div>      <div className="notes-list__item__contents">        Some contents      </div>  </li>

Having this doesn't feel quite scss

&:hover {      .notes-list__item__contents { color: #fff; }  }  

https://stackoverflow.com/questions/65963599/scss-child-styling-not-applied January 30, 2021 at 08:55AM