проблема с nth-clild

[deniscikasov@gmail.com]

Не могу поставить разные цвета <h3>

скриншот - https://skr.sh/sMikRYaj2PC

<div class="tabs-right previev">
              <div class="previev__content">
                <h3 class="previev__title">Recommended for you</h3>
              </div>
              <div class="preview__item preview__item-click preview__item-click_active">
                <div class="preview__content">
                  <h3 class="preview__subtitle">food</h3>
                  <div class="preview__text">
                    For Chicken-Fried Steak, Too Much Is Just Enough
                  </div>
                </div>
              </div>
              <div class="preview__item preview__item-click ">
                <div class="preview__content">
                  <h3 class="preview__subtitle">TECh REVIEWS</h3>
                  <div class="preview__text">
                    For Chicken-Fried Steak, Too Much Is Just Enough
                  </div>
                </div>
              </div>
              <div class="preview__item preview__item-click ">
                <div class="preview__content">
                  <h3 class="preview__subtitle">NFL</h3>
                  <div class="preview__text">
                    For Chicken-Fried Steak, Too Much Is Just Enough
                  </div>
                </div>
              </div>
              <div class="preview__item preview__item-click ">
                <div class="preview__content">
                  <h3 class="preview__subtitle">movies</h3>
                  <div class="preview__text">
                    For Chicken-Fried Steak, Too Much Is Just Enough
                  </div>
                </div>
              </div>
              <div class="preview__item preview__item-click ">
                <div class="preview__content">
                  <h3 class="preview__subtitle">cars</h3>
                  <div class="preview__text">
                    For Chicken-Fried Steak, Too Much Is Just Enough
                  </div>
                </div>
              </div>
            </div>

.preview__subtitle {
   text-transform: uppercase;

   &:nth-child(1) {
      color: red;
   }

   &:nth-child(2) {
      color: green;
   }

   &:nth-child(3) {
      color: rgb(195, 7, 170);
   }
}

[ruslan_mart]

nth-child подразумевает подядок элементов на одном уровне вложенности.

.preview__item {
   &:nth-of-type(1) .preview__subtitle {
      color: red;
   }
 
   &:nth-of-type(2) .preview__subtitle {
      color: green;
   }
 
   &:nth-of-type(3) .preview__subtitle {
      color: rgb(195, 7, 170);
   }
}

Но лучше даже так:

.preview__item {
   &:nth-of-type(1) {
      --subtitle-color: red;
   }
 
   &:nth-of-type(2) {
      --subtitle-color: green;
   }
 
   &:nth-of-type(3) {
      --subtitle-color: rgb(195, 7, 170);
   }
}

.preview__subtitle {
  color: var(--subtitle-color);
}

[deniscikasov@gmail.com]

Спасибо