Вопрос по псевдоклассам css

Question

Подскажите пожалуйста, возможно ли составить селектор из псведоклассов и тем самым обойтись без классов, чтобы задать РАЗНЫЕ стили(два разных цвета) для каждого ВТОРОГО тега span в данной верстке?

<div className="weather-card__min-max">
   <div className="min__container">
     <span>0</span>
     <span>Min</span>
   </div>
   <div className="max__container">
     <span>4</span>
     <span>Max</span>
   </div>  
 </div>

Я использую scss и пишу так:

.weather-card__min-max {
  //какой-то код//

  .min__container, .max__container {
  // И тут должно быть два стиля для каждого второго <span>

  }
}

Answer 1

.weather-card__min-max > div > 
span:nth-child(2n){
color:цвет;
}

Answer 2

На CSS:

.weather-card__min-max .min__container:nth-child(2n-1) span:nth-child(2n),
.weather-card__min-max .max__container:nth-child(2n-1) span:nth-child(2n) {
    color: red;
}

.weather-card__min-max .min__container:nth-child(2n) span:nth-child(2n),
.weather-card__min-max .max__container:nth-child(2n) span:nth-child(2n) {
    color: blue;
}

<div class="weather-card__min-max">
    <div class="min__container">
        <span>0</span>
       <span>Min</span>
    </div>
    <div class="max__container">
       <span>4</span>
       <span>Max</span>
    </div>  
</div>

На SCSS / Less :

.weather-card__min-max {
    .min__container, .max__container {
        &:nth-child(2n-1) {
            span:nth-child(2n){
                color: red;
            }
        }
        &:nth-child(2n) {
            span:nth-child(2n){
                color: blue;
            }
        }
    }
}

БЛОГ НА HUSL

Вопрос по псевдоклассам css

Ответы (2 шт):